Vite 会取代 Vue-cli 吗？

Webpack 和 Vite 都是现代化打包工具。Vue-cli 一直是 vue2 默认的官方脚手架工具，并且它是基于 Webpack 开发的；vue3 发布后，尤大同时也发布了 Vite，那么 Vite 和 Vue-cli 应该怎么选呢？

一、认识 Vite

Vite 是一种全新的前端构建工具，可以理解为是一个开箱即用的开发服务器 + 打包工具的组合，类似于 webpack + webpack-dev-server，但会比它更轻更快。Vite 利用浏览器原生的 ESM（ESM标准几乎兼容于所有流行浏览器Javascript引擎）支持和用编译到原生的语言开发的工具来提供一个快速且现代的开发体验。

ESM 是一种新的 ECMAScript 标准模块系统。它的特性是：

1. 可以安全加载模块，允许模块的无等待使用；
2. 可以有效的管理代码，改进开发流程，提高代码的可维护性；
3. 可以进行代码的复用和重用；
4. 支持多种类型的文件；

二、Vite 与 Webpack 的对比

1. Webpack

它会遍历应用程序中的所有文件，并启动一个开发服务器，然后将整个代码渲染到开发环境中。

1）webpack 会从一个 entry.js 文件开始，将其依赖的所有 js 或者其他 assets 通过 loader 打包成一个文件，随后这个打包后的文件将被从 server 传到客户端浏览器运行。

2）当保存文件时，整个 javascript 包将会被 webpack 重新构建，这就是更改后需要很长时间才能反映在浏览器中，更新速度会随着应用体积增长而直线下降。

2. Vite

它的工作方式与 webpack 不同，不会遍历整个应用程序，只是转换当时正在使用的文件或模块。

1）vite 的核心理念：非捆绑开发构建。

2）vite 的核心思想：浏览器请求它时，使用 ESM 转换并提供一段应用程序代码。

3）开始开发构建时，vite 首先将 javascript 模块分为两类：依赖模块和源码模块。依赖模块是第三方依赖的代码，从 node_modules 文件夹中导入 javascript 模块，这些模块将使用 esbuild 进行处理和捆绑，esbuild 是一个用 go 语言编写的 javascript 打包工具，执行速度比 webpack 快 10-100 倍；源码模块是源代码，即业务代码。

4）vite 不必重新打包所有内容，是因为它使用基于路由的代码拆分来了解代码哪些部分实际需要加载。

5）vite 使用现代浏览器中的原生 ESM 支持来交付代码，会让浏览器在开发中承担打包工作。

Webpack 必须在单个浏览器请求之前处理整个 Javascript 模块，而 Vite 只需要在单个浏览器请求之前处理依赖模块就可以了，这就是为什么Vite 能够比 Webpack 更快的处理开发构建。

3. 场景对比

1）开发（冷启动）：webpack：快；vite：慢

vite 首页加载时速度较慢，是因为 vite 使用浏览器承载部分打包工作与模块加载工作，所以即使开发服务器快速启动，浏览器也需要更多时间去下载和处理所有这些请求。

2）生产构建时间：webpack：快；vite：慢

vite 比 webpack 需要更长时间来打包资源，因为 vite 不是为单个模块提供服务的，是将所有内容打包在一起，在底层，它使用 Rollup 来完成。

• Rollup 是一个 Javascript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本Javascript 中的模块标准。 
• 通常情况下，如果可以将项目拆分为一个个更小的模块，开发工作就能变得更容易。因为更少的代码通常意味着更少的意外情况，并且能够显著降低我们在开发中所碰到问题的复杂程度。
• ES6 版本的 Javascript 带来了 import 和 export 的语法，该语法可以让我们在多个脚本中共享函数和数据。这一语法仅在较新浏览器中可以使用，并且 Node.js 也尚未完成该标准的导入。
• 有了 Rollup，就可以放心的使用新模块标准来书写代码了。
• Tree-Shaking：除了能够使用标准的 ESM，Rollup 还可以对所用代码进行静态分析，并将未实际用到的代码剔除。这一特性让我们无需担心存在冗余的依赖和代码。

3）生产构建加载的大小：webpack：慢；vite：快

Rollup 打包的结果会把 Dead Code 一些无用的代码以及一些不可达的代码清理掉；webpack 打包的结果这些代码依然存在，打包体积比较大；所以 vite 生产打包加载的速度会稍微快一些。

4）重建时间（热模块重新加载）：webpack：慢；vite：快

以上 vite 并没有展示出真正的优点，真正的优势是保存时在浏览器中查看更改的效果近乎及时的反馈。

真正的闪光点：开发时浏览器接近实时反馈效果。

4. Webpack 无法避免的问题

1）本地开发环境 webpack 也是需要先打包，然后服务器运行的是打包后的文件，所以代码量很大的项目就会有启服务很慢的现象。

2）热更新：webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。虽然 webpack 也采用的是局部热更新并且是有缓存机制的，但是还是需要重新打包。

三、总结

Vite 是新一代的 Javascript 构建工具，通过使用基于 ESM 的工作流程进行本地开发，确保开发服务器即使在处理大型 Javascript 应用程序时也能保持快速。

通过在底层使用 Rollup，确保生产构建实现性能优化技术，如 tree-shaking、延迟加载和常见的块拆分。

无论 Vite 可以走多远，但是这种本地无需打包利用浏览器去解析当前请求的模块，还有热更新时候只编译也不再打包的概念是我们所期待的。