vite 相比webpack的优缺点。
2020-09-17 00:58:55
Vite相比Webpack的主要优点包括更快的启动速度、高效的热更新、更优的依赖处理机制；缺点则体现在生态成熟度、生产环境构建优化及大规模应用验证方面。 以下是具体分析：
Vite的优点- 开发服务器启动速度极快
Webpack在冷启动开发服务器时，会急切地抓取和构建整个应用，需要递归识别依赖、构建依赖图谱，将代码转化敬梁成AST抽象语法树，在AST阶段处理代码，最后把AST变成浏览器可识别的代码并输出，这个过程较为耗时。
Vite通过一开始将应用中的模块区分为依赖和源码两类来改进开发服务器启动时间。依赖大多为纯JavaScript且在开发时不会变动，Vite使用esbuild（用Go编写，比以JavaScript编写的打包器预构建依赖快10 - 100倍）预构建依赖；源码通常包含非直接JavaScript文件且时常被编辑，Vite以原生ESM方式服务源码，让浏览器接管部分打包工作，只需在浏览器请求源码时进行转换并按需提供，所以启动速度比Webpack快很多陆稿枝。
- 热更新（HMR）效率高
Webpack基于打包器启动，编辑文件后即使有动态模块热重载（HMR），更新速度也会随着应用规模的增长而显著下降。因为即使使用HMR，一些打包器在文件更改时也需要使模块图的一部分失活，甚至重新构建整个包并重载页面，代价高且会消除应用当前状态。
Vite的HMR在原生ESM上执行，编辑文件时只需精确地使已编辑的模块与其最近的HMR边界之间的链失效，大多数时候只需模块本身，所以HMR更新始终快速，无论应用大小。同时，Vite利用HTTP头加速整个页面重新加载，源码模块请求根据304 Not Modified进行协商缓存，依赖模块请求通过Cache - Control: max - age = 31536000, immutable进行强缓存，缓存后无需再次请求。
- 依赖处理更优
Webpack使用Node.js去实现相关功能，在处理依赖时效率相对较低。
Vite使用esbuild预构建依赖，esbuild用Go编写，预构建依赖的速度比以Node.js编写的打包器快10 - 100倍，能更高效地处理较大的依赖（如上百个模块的组件库）。
- 生态成熟度不足
Webpack的强大之处在于其丰富的loader和plugin生态，经过多年发展已经非常成熟，能满足各种复杂的项目需求。
Vite的生态目前不如Webpack成熟，虽然这是一个时间问题，就像刚出来的M1芯片Mac，一开始人们担心生态问题，但随着时间的推移会逐渐完善，但在当前阶段，生态方面的不足可能会限制一些项目对Vite的使用。
- 生产环境构建存在局限
Vite在生产环境构建目前使用Rollup，原因是esbuild对于CSS和代码分割不是很友好。这意味着在处理一些特定的生产环境需求时，Vite可能不如Webpack灵活和强大。
- 大规模应用验证不足
Vite还没有被大规模使用，很多问题或者诉求没有真正早敏暴露出来。与Webpack经过长期大规模应用验证相比，Vite在面对各种复杂场景和大规模项目时，可能会出现一些尚未被发现的问题。不过，随着Vue3的广泛使用，Vite也有望逐渐被更多项目接受和应用。
热门标签
