【Vite与Webpack的区别】

Vite与Webpack的区别

运行时

在浏览器发展的历程中逐渐实现了对ES6语法的支持，Vite在本地运行时正是借助浏览器对ES6语法糖的支持实现了有别于Webpack（Webpack产生的时代浏览器还不支持ES6这些语法糖，像模块导入导出的import/export）本地运行时的行为。

在运行时的时候会将应用中的模块区分为依赖和源码两类。依赖就是像一些已经完全打包好的不会变动的依赖js文件。源码则是需要进行babel的如vue,jsx,tsx等浏览器还不能原生支持的语法糖写法。

对于依赖，Vite要解决将CommonJs等非ESM模块的依赖转换成ESM模块，对裸模块进行处理等。以使用浏览器支持的ESM模块导入导出的支持，在这里Vite借助的esbuild对依赖进行预构建
对于源码，Vite则借助vite.config.js配置文件对源码进行即时编译，编译成ESM模块（并且Vite也并不是在启动的时候一次编译所有的源码，而是在浏览器通过请求拉取import导入的源码资源的时候对源码进编译成ESM模块，从而降低了随着项目越来越大而导致的启动速度变慢的问题）

Vite在浏览器请求资源的时候还借助强缓存与协商缓存来加速页面的展示。对于依赖（像node_modules这样子的不怎么会变的使用强缓存，而对于编译的源码部分则使用协商缓存）的请求通过使用本地的缓存来省掉了发起请求以及等待响应的时间。

对于不支持ES6写法的老版本浏览器，Vite推荐使用 @vitejs/plugin-legacy 插件进行支持

生产时

从运行时我们可以看到Vite借助浏览器支持ES6新特性做出来的变化。那为什么在构建生产环境时，Vite依然还是如Webpack一样对项目进行了完全的编译呢？
在我看来这是因为生产时的目标与运行时的目标是不同的，运行时的目标可能是如何更快速的启动，如何更快速的加载应用，如何更快速的更新；而对于生产时来说，只有一个目的那就是更快速的加载应用，因为上生产的验证版本所需的构建时间不会影响到开发的开发效率，也不会影响到用户加载资源的速度。既然必须构建的话就构建彻底，相对减少资源请求的数量（运行时的导入都算作一个请求，数量远远比完全编译之后的一个资源文件的请求要多，多就代表了等待资源请求和响应的时间会变多）
生产环境构建的工具从esbuild转换成了rollup，官网的解释时rollup相较于esbuild具有更好的代码分割和css处理的能力

Webpack的生产时和运行时

因为Webpack所产生的时代没有更好的支持条件，所以Webpack的运行时和生产时都是与依赖和源码进行完全性的编译。运行时Webpack将编译后的bundle存储在内存中以提供给浏览器。生产时也编译成bundle，然后借助代码分割等优化逻辑配置进行处理。