Vite与Vue Cli

Vite 和 Vue Cli 师出同门，都属于 Vue 整个团队的产物，它们的功能也非常相似，都是提供基本项目脚手架和开发服务器的构建工具。在这里有几个问题需要讨论：

  • Vite 和 Vue Cli 的主要区别是什么？

  • Vite 和 Vue Cli 哪个性能更好？

  • Vite 和 Vue Cli 在实际项目中如何选择？

Vite 和 Vue Cli 的主要区别

Vite 在开发环境下基于浏览器原生 ES 6 Modules 提供功能支持，在生产环境下基于 Rollup 打包；Vue Cli 不区分环境，都是基于 Webpack。可以说在生产环境下，两者都是基于源码文件的，Rollup 和 Webpack 都是对代码进行处理，并提供浏览器页面所需要的 HTML、JavaScript、CSS、图片等静态文件。但是对于开发环境的处理，两者却有不同：

  • Vue Cli 在开发环境下也是基于对源码文件的转换，即利用 Webpack 对代码打包，结合 webpack-dev-server 提供静态资源服务。

  • Vite 在开发环境下基于浏览器原生 ES 6 Modules，无须对代码进行打包，直接让浏览器使用。

Vite 正是因为利用浏览器的原生功能，而省掉了耗时的打包流程，才使得开发环境下的体验非常好。而对于生产环境，它们各自所依赖的 Webpack 和 Rollup 这两个工具其实也各有优劣：

  • Webpack 有着生态更加丰富的 loader，可以处理各种各样的资源依赖，以及代码拆分和按需合并；Rollup 的插件生态较 Webpack 弱一些，但是也可以满足基本的日常开发需要，且不支持 Code Splitting 和热更新。

  • Rollup 对 ES 6 Modules 的代码依赖方式天然支持，而对于类似 CommonJS 或者 UMD 方式的依赖却无法可靠地处理；Webpack 借助自己的 __webpack_require__ 函数和 Babel，对于各种类型的代码都支持得比较好。

  • Rollup 会静态分析代码中的 import，并将排除任何未实际使用的代码，即对 Tree Shaking 支持得很好；Webpack 则从 Webpack 2 版本开始支持 Tree Shaking，且要求使用原生的 import 和 export 语法，并且是没有被 Babel 转换过的代码。

  • Rollup 编译的代码可读性更好（虽然基本不会去阅读这些代码），没有过多的冗余代码；而 Webpack 则会插入很多 __webpack_require__ 函数，影响代码的可读性。

Rollup 和 Webpack 图标的对比如图 9-8 所示。

image 2024 02 23 23 21 36 010
Figure 1. 图9-8　Rollup 和 Webpack 图标的对比

Vite 和 Vue Cli 那个性能更好

这个不用多说，必然是 Vite 速度更快，在开发环境下体验更好。

Vue Cli 的 Webpack 的工作方式是：它通过解析应用程序中的每一个 JavaScript 模块中的 import 或者 require，借助各种 loader 将整个应用程序构建成一个基于 JavaScript 的捆绑包，并针对不同的文件后缀名（例如 Sass、Vue 等）转换成对应的 JavaScript 文件。这都是在 webpack-dev-server 服务器端提前完成的，文件越多，依赖越复杂，则消耗的时间越多。

Vite 不捆绑应用服务器端。相反，它依赖于浏览器对 ES 6 Modules 的原生支持，浏览器直接通过 HTTP 请求 JavaScript 模块，并且在运行时处理，而对于 Sass、Vue 文件等，则单独采用插件处理，并提供静态服务。这样耗时的大头 JavaScript 模块处理就被单独剥离了出来，利用浏览器高效处理，并且对于文件的多少影响并不大，这样消耗的时间就更少。这两种模式的区别如图 9-9 所示。

image 2024 02 23 23 24 09 541
Figure 2. 图9-9　Vite 和 Vue Cli 模式对比

所以总结下来，在开发模式下，Vite 显然要比 Vue Cli 性能更强，在生产模式下相差不大。

在实际项目中如何选择

于在实际项目中如何选择 Vite 和 Vue Cli，我们先来总结一下它们各自的优缺点，如表 9-1 所示。

image 2024 02 23 23 24 55 415
Figure 3. 表9-1　Vite 和 Vue Cli 的优缺点

Vite 在开发环境下体验强，速度快是其核心优势，但是与 Vue Cli/Webpack 不同，Vite 无法在旧版浏览器使用，例如 IE 系列，这对于一些用户来说是一个抉择点。另外，Vue Cli 作为老牌构建工具，使用者众多，更加经得住历史的考验，并且社区活跃度更高，所以在生态环境和插件数量方面更好。

Vite 是一个新兴的产物，Vue 团队更想把 Vite 做成一个通用的构建工具，而不只限于 Vue，所以后面也会主推 Vite。回到问题上来，Vue Cli 和 Vite 到底怎么选择？笔者认为还是要根据自己实际的业务场景来选择，这里总结几条选择原则：

  • 当前正在运行的 Vue Cli 项目，不建议切换为 Vite，维稳！

  • 企业大型项目，构建功能复杂，需求多，建议使用 Vue Cli，稳定坑少。

  • 小型项目，业务逻辑相对简单一些，页面少，建议使用 Vite，体验好。

以上原则仅供参考，读者可以根据此建议在实际生产项目中使用。