Vite 是否可以代替 Webpack ？

从 Vue 3.0 发布之后，Vite 构建工具也随之慢慢被开发者提及，尤大也对 Vite 极力推荐。比较之前我们使用的 Webpack， 他到底有什么优势呢？我们从多个维度对比俩者的差异。我们主要对比 Webpack 5.0 版本，5.0 版本对构建速度做了很好的优化。

一、打包流程

Webpack：

1. 分析各个模块的依赖关系
2. 资源编译，编译为浏览器可识别的代码
3. 一系列处理后打包代码，交给本地服务器进行渲染

Vite：

1. 启动本地服务器
2. 请求模块时按需动态编译显示

二、打包原理

Webpack：

1. 分析各个模块的关系，构建依赖图谱
2. 将代码转换成AST抽象语法树、加工处理成浏览器可识别的代码

Vite：

1. 利用浏览器对 ESM 的支持，劫持浏览器的 HTTP 请求( Module )
2. 在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器

三、HRM

Webpack：

将该模块的所有依赖重新编译，Webpack 5.0 优化 Tree Shaking，提升了编译效率

Vite：

1. 当某个模块内容改变时，对该模块处理后，浏览器去重新请求该模块即可
2. 利用 HTTP 缓存策略，依赖会利用 HTTP 强缓存进行缓存，而源码会利用 HTTP 协商缓存进行缓存

四、依赖构建

Webpack：

Webpack 5.0 通过增量构建缓存依赖包，默认缓存到 node_modules/.cache/webpack 目录下

Vite：

Vite 通过 esbuild 进行预依赖构建，esbuild 是采用 go 语言编写，速度相比 node.js 提升10 - 100倍。默认缓存的目录：node_modules/.vite

六、生态

Webpack：

loader 与 plugin 丰富，生态相对成熟

Vite：

由于刚出来，还没有被广泛使用，生态不够友好

七、其他

Webpack：

开发时要求 Node 10.13.0 + 及以上版本

Vite：

1. 开发时要求 Node14.18 + 及以上版本
2. 支持 ESM 浏览器(也可以通过配置打包为兼容模式)

八、总结

• 由于现代浏览器大多支持 ESM，会主动发起请求去获取所需文件。Vite 充分利用这点，将开发环境下的模块文件，作为浏览器要执行的文件，而不是像 Webpack 打包后交给浏览器执行
• 由于 Vite 启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，Vite 的开发时优势越明显
• 在 HRM 方面，当某个模块内容改变时，浏览器只需重新请求该模块，并且充分利用 HTTP 缓存策略缓存依赖模块与源码。而不是像 Webpack 重新将该模块的所有依赖重新编译
• 当需要打包到生产环境时，Vite 使用传统的 rollup 进行打包，而 esbuild 对代码分割不是很友好，所以 Vite 的优势是体现在开发阶段
• 虽说 Vite 的生态目前与 Webpack 还差的较远，不过依目前的趋势，Vite 将会是未来的主流构建工具，不仅仅对于开发阶段！

九、相关文章

• Webpack 5 新特性
• 深入理解浏览器缓存机制 ( http )