前言

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

Pre-bundling dependencies:

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

在这里插入图片描述

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

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

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执行时为什么要进行 预构建依赖。

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

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

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

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

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

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

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

在服务器已经启动之后，如果遇到一个新的依赖关系导入，而这个依赖还没有在缓存中，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 文件中会自动插入配置代码：

在这里插入图片描述

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

前言

1. 原因：预构建依赖

2. 解决方案

猜你喜欢