开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

vite

vite的最新版本已经到了v3.2.0，它的定位是下一代前端工具链，webpack和Rollup给自己的定位都是项目构建工具或模块打包工具，格局略有不同，哈哈。

作为vue3的官方构建工具的标配，它主打的特点就是急速的服务启动。也就是说，vite的快速编译其实是为了解决开发者在开发模式下的一个痛点。像如果是用webpack作为配置工具，在项目刚启动时速度是比较慢的，特别是项目体量很大的情况下，因为它要把所有依赖的模块都打成bundle.js和app.js，工程越大则越耗时。而vite有什么不同呢？

按需加载

这点与webpack其他构建工具完全不同，不是把所有的源码都进行编译，而是仅编译当前显示的源码，这样就减少了编译启动时间。

原生ESM

原生ESM主要是利用了现代浏览器的支持，也就是说直接给浏览器提供原生ESM代码，将一部分编译工作给了浏览器来完成。

esbuild

esbuild是由go语言编写的构建器，相比由JavaScript编写的构建器，速度要快10~100倍。vite主要利用它来预编译依赖包，这样编译速度也大幅提升。

不足

刚一直在说的是vite在开发模式下的快速编译，其实在生产模式下构建速度没有明显的优势。在生产模式下是通过Rollup来构建打包的，之所以不在生产环境也采用相同的策略，有一点原因是esbuild诞生时间不是很长，在代码分割和CSS处理方面没有Rollup成熟稳定，而生产环境注重的就是运行稳定，而开发环境可能更追求编译速度带来的体验。

还有一点，vite在开发和生产模式下采用不同的编译打包方式，那两者生产出来的代码差别就会很大，可能会出现开发模式下正常，而生产环境编译报错的情况，也是需要注意的地方。