Vite开发服务器遇到大量依赖需要优化导致重启的问题

问题描述

在使用 Vite 开发服务器时，发现首次加载某个页面时会出现大量 new dependencies optimized 的日志输出，导致开发服务器重启（触发 optimized dependencies changed）。这种情况表明依赖预构建未能正确扫描到所有静态导入的依赖项。

环境信息：

json 复制代码

{
  "devDependencies": {
    "vite": "5.3.3"
  }
}

尽管 Vite 在启动开发服务器时会进行依赖预构建（参考 Vite 官方文档 - 依赖预构建），但动态导入、插件生成的依赖等场景可能导致部分依赖无法通过静态分析被发现。然而，在本项目中，大部分依赖都是通过静态导入引入的，理论上不应该出现如此多未被扫描到的依赖。

问题分析

通过运行以下命令启用调试模式：

bash 复制代码

vite serve --host --debug

我们观察到 Vite 在依赖预构建阶段的日志如下：

bash 复制代码

vite:deps Scan completed in 1870.75ms: no dependencies found +2s

这表明 Vite 在默认配置下未能扫描到任何依赖项。

根据 Vite 官方文档，Vite 默认会抓取项目的 index.html 文件来检测需要预构建的依赖项，并忽略 node_modules、build.outDir、__tests__ 和 coverage 等目录。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。

此外，Vite 官方指南提到，默认情况下 index.html 应位于项目的最外层，作为 Vite 项目的入口文件。

结合以上信息，我们发现问题的根本原因在于本项目的目录结构与 Vite 的默认配置不匹配。具体来说：

本项目是一个多页面应用，包含多个 .html 入口文件。

这些 .html 文件并不位于项目的最外层，而是嵌套在子目录中，例如：

arduino 复制代码

├── package.json
├── pnpm-lock.yaml
├── src
│   └── release
│       ├── basic
│       │   ├── busi_dict
│       │   │   ├── BusiDict.html
├── vite.config.js

由于 Vite 默认只会扫描项目根目录下的 index.html，而本项目的入口文件分散在子目录中，因此 Vite 无法正确扫描到依赖项。

解决方案

为了确保 Vite 能够正确扫描到所有依赖项，我们需要手动指定扫描范围。具体步骤如下：

设置项目根目录

如果项目的入口文件不在默认的根目录（即 process.cwd()），可以通过 root 配置项指定项目根目录。例如：
js 复制代码
```
root: './src'
```
配置 optimizeDeps.entries

使用 optimizeDeps.entries 手动指定需要扫描的文件或目录。注意，这里的路径是相对于项目根目录的。例如：
js 复制代码
```
optimizeDeps: {
  entries: ['release/**/*.{js,ts,jsx,tsx,vue}']
}
```
上述配置表示扫描 release 目录及其子目录中所有扩展名为 .js、.ts、.jsx、.tsx 或 .vue 的文件。

验证配置效果

再次运行以下命令：

bash 复制代码

vite serve --host --debug

此时，Vite 的扫描日志应显示成功扫描到了大量依赖项，例如：

bash 复制代码

vite:deps Scan completed in 2400.41ms:
  @opentiny/vue -> F:/Desktop/Shine/ibt2.0-base/node_modules/@opentiny/vue/index.js
  es-toolkit -> F:/Desktop/Shine/ibt2.0-base/node_modules/es-toolkit/dist/index.mjs
  lodash -> F:/Desktop/Shine/ibt2.0-base/node_modules/lodash/index.js
  vue -> F:/Desktop/Shine/ibt2.0-base/node_modules/vue/dist/vue.esm.js
  vuex -> F:/Desktop/Shine/ibt2.0-base/node_modules/vuex/dist/vuex.mjs
  ...

总结

通过上述分析和配置调整，我们解决了 Vite 依赖预构建未能正确扫描依赖的问题。关键在于理解 Vite 的默认扫描机制，并根据项目实际目录结构调整相关配置。以下是 vite.config.js 相关部分示例：

js 复制代码

export default {
  root: './src',
  optimizeDeps: {
    entries: ['release/**/*.{js,ts,jsx,tsx,vue}']
  }
};

此配置确保了 Vite 能够正确扫描到所有静态导入的依赖项，从而避免开发服务器因依赖变更频繁重启的问题。