vite

Vite 为什么比 Webpack 快

对于 Webpack

项目启动时，webpack 对项目进行全量的打包，然后开启一个 node 服务供浏览器访问

对于 Vite

Vite 使用 ESBuild 对项目的依赖进行一个构建，ESBuild 是基于 Go 语言编写的自身具有多线程自然性能比 JS 快，而 Webpack 使用的是 JS 构建。Vite 开启 Node 服务提供项目模块。Vite 利用浏览器的自身对模块加载的能力实现按需加载，Vite 只对浏览器请求到的模块进行一个编译返回给浏览器，而不是全量打包，并且编译后的模块会利用浏览器的协商缓存对结果进行缓存(利用网络 304)。

总的来说

• 最主要的原因是 Vite 不用全量大包构建，而是按需构建。利用浏览器支持 ESM 按需加载模块，当模块被加载时才进行编译构建
• 使用 esbuild 将第三方依赖进行构建，esbuild 用 Go 语言编写，Go 支持多线程性能远高于 JS
• 利用浏览器缓存将构建后的数据缓存

Vite 相比 Webpack 的缺点

• 首屏变慢，首屏时需要构建相关模块
• 目前生态不如 Webpack