在 vite 中通过 build.rollupoptions.external 配置可将 react、vue 等大型依赖外部化，避免重复打包、减小体积并提升 tree-shaking 效果；需配合 peerdependencies 声明以确保用户正确安装对应版本。
在 Vite 中配置 Rollup 外部化大型依赖，本质是通过 build.rollupOptions.external 告诉打包器：这些模块不打进最终产物，由使用者环境提供。这对 React、Vue、lodash 等通用依赖尤其关键——避免重复打包、减小体积、提升 tree-shaking 效果。
明确哪些依赖该 external
通常外部化的库具备以下特征：
- 用户项目中已存在（如 react、vue、react-dom）
- 体积大且不参与逻辑封装（如 lodash、moment）
- 属于运行时框架或 peerDependencies（需在
package.json中声明）
在 vite.config.ts 中配置 external
直接在 build.rollupOptions.external 字段中指定：
import { defineConfig } from 'vite';<br>export default defineConfig({<br> build: {<br> rollupOptions: {<br> external: [<br> 'react',<br> 'react-dom',<br> 'vue',<br> 'lodash-es',<br> '@ant-design/icons'<br> ]<br> }<br> }<br>});
这样，Rollup 在构建时会跳过这些模块的解析与打包，保留原始 import 语句（如 import React from 'react'），交由最终宿主环境处理。
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
支持正则或函数判断更灵活的场景
当需要按命名空间或动态规则排除时，可用函数或正则：
-
正则方式：排除所有以
@types/开头的包：/^@types\// -
函数方式：精细控制（例如仅 external 非本地路径）：
external: (id) => id.startsWith('react') || id.startsWith('vue')
注意：函数返回 true 表示“外部化”，返回 false 或 undefined 表示正常打包。
配合 package.json 的 peerDependencies 使用
external 只是打包行为，还需同步声明依赖关系，否则用户安装时可能遗漏：
示例（package.json）："peerDependencies": {<br> "react": "^18.0.0",<br> "react-dom": "^18.0.0"<br>},<br>"devDependencies": {<br> "react": "^18.0.0",<br> "react-dom": "^18.0.0"<br>}
这样既保证开发时可运行，又提示用户必须自行安装对应版本，避免版本冲突或重复引入。
