应显式配置 external 以避免大体积依赖打包进产物:仅对体积大、消费者已安装、纯 esm 且无需编译的包(如 react、lodash-es、three)在 build.rollupoptions.external 中声明,同时补全 peerdependencies 和类型声明,并通过 report 验证生效。

大体积依赖(如 lodash、moment、three、pdfjs-dist 等)若被打包进产物,会显著增加 bundle 体积、拖慢首屏加载,还可能干扰 tree-shaking。Vite 默认不会自动外部化第三方包,必须显式配置才能让它们“不进 bundle”,而是以 import 形式保留在代码中,交由消费者项目处理。
明确哪些包需要 external
不是所有依赖都要 external —— 只有那些满足以下条件的才适合:
- 体积大(单个 >100KB)、且被多个模块反复引入
- 消费者项目大概率已安装(如 React、Vue、Lodash),或能统一提供(如微前端主应用注入)
- 本身是纯 ESM 或已预构建为 ESM(避免 CJS 模块导致 Vite dev 报
require is not defined) - 不包含需编译的源码(如含
.ts或.jsx的包,external 后可能类型或运行时报错)
在 vite.config.js 中配置 external
Vite 生产构建基于 Rollup,所以直接使用 build.rollupOptions.external 声明外部化列表:
build: {
rollupOptions: {
external: [
'react', 'react-dom',
'lodash-es',
'three',
/^@ant-design\/.*/, // 正则匹配 antd 相关包
],
}
}
})
注意:external 只影响生产构建(vite build),不影响开发服务器;dev 模式下仍走 esbuild 预构建,external 不生效。
配套处理:确保类型和运行时兼容
仅 external 不够,还需同步解决两个常见问题:
-
类型声明缺失:external 后 d.ts 中仍应导出对应类型。可在
index.d.ts中手动添加declare module 'lodash-es',或用typesVersions+exports字段在package.json中精准控制类型路径 -
运行时找不到模块:消费者项目必须实际安装该依赖。建议在库的
peerDependencies中声明,例如:
"peerDependencies": {
"react": "^18.0.0",
"lodash-es": "^4.17.0"
}
验证是否生效
构建后检查产物中是否还含目标模块代码:
- 执行
vite build --report生成report.html,搜索模块名,确认其不在 chunk 列表中 - 打开生成的
.js文件,搜索import.*lodash或require\('lodash',确认只保留 import 语句,无内联代码 - 在消费者项目中
import你的库后,检查node_modules是否确实存在对应peerDependency,且未被重复打包
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











