vite 项目切换不同依赖项的分支，运行加载缓慢问题的解决方案（Pre-bundling dependencies）

心已赠人 2024-03-27 16:44 209阅读 0赞

## 前言 ##

当我们在首次使用 `yarn dev` 命令启动 `vite` 时，或者 切换分支，依赖项发生变化时 会发现项目启动时相当的慢，大概要十几分钟，而且控制台终端打印了如下信息：

Pre-bundling dependencies:

this will be run only when your dependencies or config have changed

![在这里插入图片描述][f5b9938b0e3648e7a486fcf1b7285e30.png]

遇到这种情况时，真的是相当恶心，有时候项目启动完成要花费半小时的时间，着实是浪费时间。

其实原因控制台已经提示的很清楚了：

warning package.json: No license field
    $ vite
    Pre-bundling dependencies: (正在预构建依赖)
      react
      react-dom
      antd
      react-redux
      antd/lib/locale/zh_CN
      (...and 29 more)
    (this will be run only when your dependencies or config have changed)(这将只会在你的依赖或配置发生变化时执行)

**论学好英语的重要性！！！**

知道了问题出在哪里，就能对症下药，问题也会很快妥善解决。

## 1. 原因：预构建依赖 ##

首先，我们先了解下 `vite`执行时 为什么要进行 `预构建依赖`。

1.  **CommonJS 和 UMD 兼容性：** 开发阶段中， Vite 的开发服务器将所有代码视为 **ES原生模块**。因此，Vite 必须先将作为 CommonJS 或者 UMD 发布的依赖项转换为 ESM.

当转换 CommonJS 依赖时，Vite 会执行智能导入分析，这样即使导出是动态分配的（比如React），按名导入也会符合预期效果。比如：

// 符合预期
    import React, {
         useState } from 'react'

1.  **性能：** Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。

一些包将它们的 ES 模块构建作为许多单独的文件相互导入。比如： `lodash-es` 有超过600个内置模块。当我们执行 `import { debounce } from lodash-es` 时，浏览器同时发出 600 多个 HTTP 请求，尽管服务器在处理这些请求时没有问题，但大量的请求会在浏览器端造成网络拥塞，导致页面的加在速度相当缓慢。

通过 **预构建** `lodash-es` 成为一个模块，我们就只需要一个 HTTP请求即可。

> **注意：**  
> 依赖预构建仅会在开发模式下应用，并会使用 `esbuild` 将依赖转为 ESM 模块，在生产构建中则会使用 `@rollup/plugin-commonjs`

在服务器已经启动之后，如果遇到一个新的依赖关系导入，而这个依赖还没有在缓存中，Vite 将重新运行依赖构建进程并重新加载页面。 这就是为什么不同依赖下的分支切换后，项目运行也会变的非常缓慢的原因。

更多详细信息，可以参考 [Vite 官网][Vite]

## 2. 解决方案 ##

**所需依赖包：**

*  **vite-plugin-optimize-persist**
 *  **vite-plugin-package-config**

**使用：**

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

**vite.config.ts 中进行配置：**

// vite.config.ts
    
    import OptimizationPersist from 'vite-plugin-optimize-persist'
    import PkgConfig from 'vite-plugin-package-config'
    
    export default defineConfig({
        
    	plugins: [
    		PkgConfig(),
            OptimizationPersist(),
    	]
    })

**package.json 文件中会自动插入配置代码：**

![在这里插入图片描述][956e88a2b87f438fb052773e328f40fc.png]

[f5b9938b0e3648e7a486fcf1b7285e30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6dd8d3a7cfb041f890ece255e2fd4860.png
[Vite]: https://cn.vitejs.dev/guide/dep-pre-bundling.html
[956e88a2b87f438fb052773e328f40fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c81c426883a74da2a3b489c43b5a9423.png