Vite - 依赖预购建

官方文档

1，目的

主要是下面2点：

1.1，CommonJS 和 UMD 模块的兼容性

Vite 在本地启动的开发服务器，会将所有代码看做 ESM 模块。所以项目使用的依赖中，如果有 CommonJS 和 UMD的依赖项，Vite 会智能分析并将它们转为 ESM 模块。

1.2，性能

有的依赖项，为了实现按需引入和方便 tree shaking，会拆分为许多的子模块。比如执行下面的代码时，浏览器会同时发出超过600个请求。

import { debounce } from 'lodash-es'

临时添加下面的配置项，就可以看到效果：

// vite.config.ts
export default defineConfig({
    // ...
    optimizeDeps: {
        exclude: ['lodash-es'],
    },
});

2，作用范围和配置

2.1，作用范围

默认情况下，Vite 会从 index.html（引入的 main.ts）来检测使用了哪些依赖，需要进行预构建。

下面3个位置发生变化，Vite 会重新进行预构建：

1. package.json 中的 dependencies 列表;
2. 包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml；
3. vite.config.js 配置文件中的 optimizeDeps.include 字段。

2.2，自定义配置

可以看到，一般情况下用不到自定义配置，因为 Vite 会自动搜索 dependencies 列表，足够用了。

当然也可以显示指定：

// vite.config.ts
export default defineConfig({
    // ...
    optimizeDeps: {
        include: ['lodash-es'],
        exclude: ['xxx'], // 不参考预购建的依赖。
    },
});

更多配置项参考 官方文档。

4，缓存实现过程

当启动本地服务器，并在浏览器中访问服务器地址时，Vite 会在 node_modules/.vite 目录下新建 deps 目录，用于存放预购建的依赖。

Vite 解析后的依赖请求，会设置响应头 max-age=31536000,immutable 进行强缓存：

当第一次请求后，之后的请求不会再到达开发服务器，而是强缓存在浏览器中：

之后，如果需要更新预购建的依赖：

• 重新启动服务器，并添加 --force 参数。
• 手动删除 node_modules/.vite 目录。

同时看到项目中使用的依赖，引用路径也发生了变化：

5，注意点

依赖预购建只会在开发模式下应用，使用的是 esbuild 将依赖转为 ESM 模块。

生产环境会使用 @rollup/plugin-commonjs 打包。

该插件的主要作用就是，将 CommonJS 模块转为 ESM 模块，方便打包。

---

以上。