核心是让 Vite 启动时提前将关键第三方库转为 ESM 并合并压缩，避免运行时临时处理拖慢首屏；需手动 include 体积大或多模块的库（如 lodash-es、monaco-editor/esm/vs/editor/editor.api）及 CJS 包（如 jsbarcode），exclude 已原生支持 ESM 或体积极小的库（如 vue、dayjs）。
核心是让 Vite 在启动时就把关键第三方库提前转成浏览器能直接加载的 ESM 格式，并合并压缩，避免运行时临时处理拖慢首屏。
哪些库需要手动加入预构建
不是所有依赖都需要预构建，重点盯住两类：
-
体积大、模块多的库：比如
lodash-es（全量导入）、monaco-editor/esm/vs/editor/editor.api（按需子路径），它们若等首次 import() 时才处理，会明显卡顿 -
CommonJS 格式的包：例如旧版
axios（非 ESM 版）、jsbarcode、qrcode，Vite 必须转格式才能加载
注意：不要写 'monaco-editor' 这种宽泛路径，它会触发整包构建；应精确到实际用到的子路径。
哪些库建议排除预构建
已天然支持 ESM 或体积极小的包，再预构建纯属浪费时间：
立即学习“Java免费学习笔记（深入）”；
-
现代框架生态包：如
vue、vue-router@4+、pinia，它们 package.json 中有"type": "module"或规范的"exports" -
轻量工具库：如
dayjs、nanoid、mitt，本身不到几 KB，转完收益远低于开销
排除前务必确认格式——查 node_modules 里对应包的 package.json，避免误 exclude 导致 “not a module” 报错。
配置写法与常见陷阱
在 vite.config.ts 的 optimizeDeps 里明确声明：
optimizeDeps: {
include: [
'lodash-es',
'monaco-editor/esm/vs/editor/editor.api',
'jsbarcode'
],
exclude: ['vue', 'dayjs', '@iconify-icons/ep']
}
- 全局引入的库（如 main.ts 里
import 'vuedraggable'）通常已被自动捕获，无需重复加 include - 动态导入（
import('monaco-editor')）容易漏检，必须手动 include 对应路径 - 缓存默认存在
node_modules/.vite/deps，删掉它可强制重建，但开发中不建议设force: true
验证是否生效
启动项目后观察控制台日志：
- 看到
Pre-bundling dependencies...后列出你 include 的包名，说明已纳入 - 打开浏览器开发者工具 → Network，刷新页面，检查
/node_modules/.vite/deps/下是否有对应生成文件（如lodash-es.js） - 路由跳转不再整页刷新，且新页面加载无明显延迟，通常是预构建覆盖到位的表现
