V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
K120
V2EX  ›  分享创造

Vite 是真的强

  •  
  •   K120 · 2021-04-22 19:40:44 +08:00 · 5948 次点击
    这是一个创建于 1310 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自己的小网站用的 Create React 构建, 今天用 Vite 改造下,真的舒服。

    从启动 1 分钟缩小到 1-2 秒, 打包从 20MB 缩小到 4MB,打开网站直接秒开, 最重要的是配置很方便。

    仓库

    21 条回复    2021-04-28 12:55:03 +08:00
    Vegetable
        1
    Vegetable  
       2021-04-22 20:20:46 +08:00
    打包是 rollup,体积不可能比 webpack 小这么多,你这是从全量改按需引入了?
    jeffwcx
        2
    jeffwcx  
       2021-04-22 20:24:34 +08:00
    @Vegetable esbuild 吧
    amundsen
        3
    amundsen  
       2021-04-22 21:03:59 +08:00
    vite 优雅地解决了开发阶段通过:绕过打包和浏览器按需引入提升开发体验
    agdhole
        4
    agdhole  
       2021-04-22 21:32:30 +08:00
    esbuild is feature
    Jirajine
        5
    Jirajine  
       2021-04-22 21:36:08 +08:00 via Android
    非 vue 项目用 snowpack 更好
    FightPig
        6
    FightPig  
       2021-04-22 22:41:52 +08:00
    @jeffwcx 打包还是 rollup,
    bojackhorseman
        7
    bojackhorseman  
       2021-04-22 22:56:47 +08:00 via iPhone
    确实,不久前把 vue2 项目从 vue cli 迁移到 vite,开发体验直线飞升😏
    Shook
        8
    Shook  
       2021-04-22 22:57:59 +08:00
    之前用 webpack+tailwindcss,体验很差。
    换了 vite2 以后确实爽很多。
    cmdOptionKana
        9
    cmdOptionKana  
       2021-04-22 23:36:09 +08:00
    这么说来尤雨溪还真的有点东西啊
    jeffwcx
        10
    jeffwcx  
       2021-04-23 00:38:03 +08:00
    @cmdOptionKana 能搞出世界级框架的人能没货吗?
    cmdOptionKana
        11
    cmdOptionKana  
       2021-04-23 00:42:40 +08:00
    @jeffwcx 我是认为他很牛的,只是之前看到网上有些人说他侥幸成功了一次,现在他们无法再说侥幸了。
    lostpg
        12
    lostpg  
       2021-04-23 07:19:44 +08:00 via Android
    按需引入。。。听起来像 LTO
    April5
        13
    April5  
       2021-04-23 08:30:56 +08:00 via Android
    vite 强,esbuild 更强
    LokiSharp
        14
    LokiSharp  
       2021-04-23 08:39:15 +08:00
    不就是 rollup 二次开发么。。。还不如直接 rollup
    Vegetable
        15
    Vegetable  
       2021-04-23 09:58:15 +08:00
    @jeffwcx esbuild 用在开发服务器上,打包还是 rollup 。

    Why Not Bundle with esbuild?
    While esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress - in particular code-splitting and CSS handling. For the time being, Rollup is more mature and flexible in these regards. That said, we won't rule out the possibility of using esbuild for production build when it stabilizes these features in the future.
    shunia
        16
    shunia  
       2021-04-23 15:42:57 +08:00
    感谢分享,虽然对 vue 没啥兴趣,但是这个 vite 看起来很靠谱。
    另外 vite 的文档有些不太突出主题,看了一圈才理解它其实是一个完整的工具流。

    这种完整的工具流确实有助于快速开发,并提供一定水准的预期特性,对中小型开发很友好。但是对大型开发来说,其实改造才是最大的成本。CRA (严格来说不算同类型)就受限于改造成本偏高,很难应用于团队或者说大型项目。

    esbuild 如 vite 文档所说确实还达不到生产的目的,所以用 rollup 确实也是一个很自然的选择。

    snowpack 的问题在于特性支持不够多,依赖的 esbuild 还不够稳定。而且目前看起来 vite 突出于 snowpack 的特性也都比较有价值 https://cn.vitejs.dev/guide/comparisons.html#snowpack,值得尝试。
    fy
        17
    fy  
       2021-04-23 19:27:10 +08:00
    还是不行,我前两天 vue router 切页动画翻车了
    BGLL
        18
    BGLL  
       2021-04-23 22:32:24 +08:00
    其实还是有很多坑的,比如导入包的文件名带特殊字符`#`会导致导入失败的 bug 一个多月还没修好( https://github.com/vitejs/vite/issues/2346 ),导致很多第三方包用不了。esbuild 也有一些奇怪的问题。
    如果是新项目可以试试,依赖多的旧项目迁移起来还是很麻烦。
    nexo
        19
    nexo  
       2021-04-24 00:20:10 +08:00
    vite 不打包
    Desiree
        20
    Desiree  
       2021-04-26 11:58:40 +08:00   ❤️ 1
    其实就是简化配置过程,其实就是 rollup 那套东西
    xiayue
        21
    xiayue  
       2021-04-28 12:55:03 +08:00
    @Jirajine snowpack 超好用。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2911 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 72ms · UTC 03:25 · PVG 11:25 · LAX 19:25 · JFK 22:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.