Skip to main content

Vite

1、 Vite为什么比 Webpack 快​

1.1、 Webpack 的工作原理​

webpack 会通过项目的入口 js 文件，去分析js 中的 require 语句，分析出当前 js 所依赖的文件，然后通过递归的方式层层分析，得到整个项目的依赖关系图，对图中不同的文件执行不同的 loader。

  • 图片文件：file-loader
  • css 文件：css-loader、sass-loader、less-loader
  • TypeScript 文件：ts-loader

这样的构建构过程，导致了在我们调试代码之前，需要等待 Webpack 的依赖收集过程，而当项目代码体量很大时，这个依赖收集的过程往往需要我们等待几十秒甚至一两分钟。

1.2、 Vite 快在哪里？​

1.2.1、 开发阶段快​

  • 利用浏览器原生支持 ESM：Vite 利用了浏览器原生支持 ESM 的特性，在开发阶段不进行打包，而是直接将 ES 模块代码发送给浏览器。浏览器会根据需要按需加载模块，从而大大提高了启动速度。

  • 使用 esbuild 进行编译：Vite 使用 esbuild 进行 JavaScript 代码的编译。esbuild 是一个用 Go 语言开发的 JavaScript 编译工具，编译速度非常快。

  • 按需编译：Vite 在开发阶段只编译当前需要加载的模块，其他模块则等到需要时再编译。这样可以进一步提高编译速度。

1.2.2、 构建阶段快​

  • 精简产物：Vite 在生产环境下会使用 Rollup 进行打包，并使用 tree-shaking 等技术来精简代码，从而生成体积更小的产物。
  • SWC：SWC 是一个用 Rust 语言开发的 JavaScript 编译工具，编译速度比 Babel 快很多。此外，SWC 还支持 TypeScript、JSX 等语法，并且可以与 Rollup 等打包工具无缝衔接