深度探析Webpack和Vite的区别？

前置：现代浏览器原生 ES module支持，只需要在<script>标签中添加type="module"，就可以使用ES module了。在<script type="module">中，浏览器遇到内部的import引用时，会自动发起http请求，去加载对应的模块。

Webpack:

底层代码是nodejs，单线程

开发阶段优先全量打包

热更新：每次修改，重新打包

 

---

Vite:

底层代码是Go编写的esbuild，多线程并行

开发阶段：优先预构建（esbuild），将所有模块转换为es module，不直接打包。浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。（冷启动比webpack快）。生产环境中，Vite 才会进行打包操作。

热更新：

1.监听到文件变更后，会用websocket通知浏览器，重新发起新的请求，只对该模块进行重新编译，然后进行替换。

2.并且基于es module的特性，vite利用浏览器的缓存策略

【源码模块】（我们自己写的代码）协商缓存处理，

【依赖模块（第三方库）】              强缓存处理

生产阶段：

Rollup 高效打包

简洁配置（没有webpack复杂）