vite和webpack对比

定位分析

打包工具：webpack、rollup、parcel、esbuild

作用：可以对代码进行压缩、合并、转换、分割、打包

衍生：vue-cli、create-react-app、umi 等是基于webpack的上层封装，用于快速创建项目

vite：开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包

差异分析

1、启动差异

webpack：webpack会根据我们配置文件（webpack.config.js） 中的入口文件（entry），分析出项目项目所有依赖关系，会将所有文件编译一遍，无论模块是否被执行，项目复杂度越增加，启动时间就越长。然后打包成一个文件（bundle.js），交给浏览器去加载渲染。

bundle.js：是可以被浏览器认识的，拿来即可直接运行的 js 文件。bundle.js 的本质是一个立即执行函数，这个函数的输入是依赖拓补图（一个js 对象），没有输出。内部会按照依赖顺序，依次以 eval(code) 的形式运行代码。

Vite：首先会用esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。

es module：使用 import 用于导入模块， export 用于导出模块。模块内部的变量和函数默认是私有的，不会污染全局作用域，浏览器遇到内部的import引用时，会自动发起http请求，去加载对应的模块。

2、底层差异

webpack：基于nodejs运行的，由于js只能单线程运行，无法利用多核CPU的优势，当项目越来越大时，构建速度也就越来越慢了。

vite=>esbuild：基于Go语言，可以充分利用多核CPU的优势，它在构建依赖的速度上比使用JavaScript编写的打包器快10-100倍。

vite=>http2：可以并发请求，在之前http1的时候，浏览器对同一个域名的请求，是有并发限制的，一般为6个，如果并发请求6个以上，就会造成阻塞问题，所以在http1的时代，我们要减少打包产物的文件数量，减少并发请求，来提高项目的加载速度。2015年以后，http2出现了且没有并发限制。这时候，将打包产物分成多个小模块，并行去加载。vite也充分利用了这一优势，对项目资源进行了合理的拆分，访问项目时，同时加载多个模块，来提升项目访问速度。

3、热更新效率

webpack项目中，每次修改文件，都会对整个项目重新进行打包，虽然webpack现在有了缓存机制，但还是无法从根本上解决这个问题。

vite vite项目中，监听到文件变更后，会用websocket通知浏览器，重新发起新的请求，只对该模块进行重新编译，然后进行替换。 并且基于es module的特性，vite利用浏览器的缓存策略，并且做了协商缓存处理，针对依赖模块（第三方库）做了强缓存处理，所以热更新效率高。

4、打包差异

Rollup 是一款 ES Module 打包器相比于 Webpack，Rollup要小巧的多，打包生成的文件更小更快。vite正是基于es module的特性实现的，所以使用rollup要更合适一些。

为什么不适用esbuild打包：

Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容，rollup插件api与基础建设更加完善，生产环境vite使用rollup打包会更稳定一些。 如果后面esbuild基础建设与生态更加完善后，esbuild还是更有优势的。 所以使用vite可能会带来开发环境与生产环境打包结果不一致的问题。

5、使用差异

如果我们使用webpack自己去搭建项目脚手架时，需要配置比较多的东西， 比如：跨域、代码压缩、代码分割、css预处理器的代码转换、样式兼容性、vue/react代码解析、图片压缩、代码热更新、es降级、ts转换等等，我们需要了解各种loader、plugin的使用，并且需要根据项目场景，对配置不断进行优化 所以就出现了一些基于webpack上层封装的脚手架，如：vue-cli、create-react-app、umi等。

vite vite对我们常用功能都做了内置，比如：css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR等等，我们可以很轻松的通过配置项去配置

6、社区生态

Webpack的loader和plugin已经非常成熟，但是，Vite的生态还相对落后，但正在逐渐发展。