Mydoc

外观

Vite 是一个现代化的前端构建工具，与传统的构建工具（如 Webpack）不同，它采用了预构建(pre-bundling)和依赖预编译的策略，以及利用原生 ES 模块系统进行快速的冷启动。下面是 Vite 构建流程的详细步骤：

1. 启动阶段(Start up) ​

当你运行 vite 或者 vite serve 命令时：

  • Vite 首先会加载用户的配置文件（如 vite.config.js
  • 然后，它会对项目的依赖进行检测，这些依赖是在 node_modules
  • Vite 会利用 esbuild 预构建这些依赖，即把 CommonJS 或 UMD 等模块转换为 ES 模块格式，并存储在缓存中。

2. 开发阶段(Development) ​

在开发模式下：

  • 模块解析
  • 热模块替换(HMR)
  • 按需编译

3. 构建阶段(Production Build) ​

当你运行 vite build 命令进行生产环境构建时：

  • Vite 会启动 Rollup 来打包应用。Vite 之所以使用 Rollup，是因为 Rollup 在打包库和生成最终的静态资源文件方面表现更佳。
  • 此阶段包括代码拆分（Code Splitting）、懒加载（Lazy Loading）、压缩（Minification）和树摇（Tree Shaking）等步骤。
  • 构建配置可以进一步优化，例如通过 terser 插件进行代码压缩，通过 CSS 预处理器和 PostCSS 插件来处理样式文件。
  • 打包完成后，你会得到用于生产环境部署的静态资源。

3.1. 代码拆分(Code Splitting) ​

代码拆分是一种优化技术，目的是将代码分成多个小块。当使用像Vite这样的现代前端构建工具时， 代码拆分通常是自动进行的。它允许按需加载页面或功能所需的代码，而不是一次性加载整个应用程序的代码。这样可以减少初始加载时间，提高性能。

3.2. 懒加载(Lazy Loading) ​

与代码拆分相辅相成的是懒加载。这是一种技术，它将非关键资源的加载推迟到需要它们的时候。例如，当用户滚动到页面的某个部分时，才加载那部分的图片或脚本。这种方式可以确保用户一开始不必等待加载他们可能永远不会看到的资源。

3.3. 压缩(Minification) ​

压缩是减小文件大小的过程，通常通过移除不必要的字符（如空格、换行符和注释），以及通过修改变量名为更短的形式来实现。这样可以减少代码的体积，加快传输速度，减少加载时间。

3.4. 树摇(Tree Shaking) ​

树摇是一个术语，用于描述移除代码中未使用的部分的过程。例如，如果你的代码库中有未被引用的函数或模块，构建工具可以识别并排除这些冗余代码。这样不仅减少了最终打包文件的大小，还可以减轻浏览器的解析和编译负担。

4. 插件作用(Plugins) ​

Vite 的插件系统允许在构建过程中的不同阶段介入：

  • 插件可以用来改变 Vite 的内部构建步骤，增加新的功能，或是与其他构建工具集成。
  • 插件既可以在开发阶段起作用，也可以只在生产构建阶段起作用。
  • 例如，你可以使用 @vitejs/plugin-legacy 插件来为旧版浏览器生成传统的 ES5 代码。或者，你可以使用 @vitejs/plugin-vue 插件来处理 Vue 单文件组件。
  • 你也可以编写自己的插件，以满足特定的需求。

5. 静态资源处理(Static Asset Handling) ​

  • Vite 对静态资源如图片、样式表、字体文件等也进行了优化处理，可以配合插件进行版本哈希（hashing）、内联等操作。
  • 通过这些步骤，Vite 旨在为现代前端开发提供快速的服务器启动和模块热更新，并在生产构建时利用 Rollup 的高效打包能力。
  • 与 Webpack 相比，Vite 在开发模式下不需要打包操作，因此可以提供更快的热更新和服务器启动速度。

6. 优点 ​

Vite 的优点主要有以下几点：

  • 首次启动快速，因为它使用原生 ES 模块系统，不需要进行打包和编译。
  • 冷启动快速，因为它使用了预构建和依赖预编译的策略。
  • 热模块替换(HMR)快速，因为它使用了 esbuild 对模块进行了缓存。
  • 支持 TypeScript、JSX、CSS Modules、Web Assembly 等。
  • 支持插件系统，可以对构建过程进行自定义。
  • 支持开发服务器代理，可以解决开发环境的跨域问题。
  • 支持按需编译，可以只编译你正在开发的部分。
  • 支持生产环境构建，可以生成用于生产环境部署的静态资源。
  • 与 Vue 3 生态系统完美兼容。

7. 缺点 ​

Vite 的缺点主要有以下几点：

  • Vite 还处于 Beta 阶段，可能存在一些 bug。
  • Vite 与 Webpack 不同，它不会将依赖图中的所有模块打包到一个或多个 bundle 中，而是将其分散到多个文件中。这意味着，当你在一个页面中使用了多个第三方库时，可能会生成多个 bundle，而不是一个 bundle。
  • Vite 仍然处于快速发展阶段，它的 API 可能会发生变化。这意味着，你可能需要经常更新你的项目，以保持与最新版本的 Vite 兼容。