npm包CSS重复打包的根本原因是构建工具将不同路径或多次import视为独立依赖，需通过manualChunks正则匹配统一提取、删除冗余import并验证产物。
多个 npm 包引入相同 CSS（比如都 import `'normalize.css'` 或 `'@picocss/pico/css/pico.min.css'`）时，Vite/webpack 默认会把同一份 CSS 多次打进不同 chunk，最终生成多份重复内容。这不是 bug，而是构建工具对 import 语句的字面解析结果——只要路径字符串不完全一致、或被不同模块分别 import，就视为独立依赖。
为什么 npm 包里的 CSS 会被重复打包？
根本原因在于：npm 包的 CSS 文件通常没有被识别为“公共模块”，尤其当多个包各自在内部 import 同一份第三方样式（如 normalize.css），而你的项目又没做显式归一化处理时，构建工具无法自动合并。
- 同一 CSS 路径被多个
node_modules子包分别import，例如package-a和package-b都写了import 'normalize.css' - 你自己的代码也写了
import 'normalize.css'，和依赖包形成“三方引用”，进一步加剧分裂 - Vite 的
build.rollupOptions.output.manualChunks默认不覆盖node_modules中的 CSS，除非你显式匹配 - 某些包导出的是 SCSS/Sass 源码（如
@primer/primitives），若未正确配置 preprocessor，可能触发多次编译而非复用
用 manualChunks 强制提取公共 CSS 模块
这是最直接可控的解法：告诉 Rollup 把所有匹配的 CSS 相关路径统一打到一个 chunk 里，避免散落。
在 vite.config.ts 中添加：
立即学习“前端免费学习笔记（深入）”；
build: {
rollupOptions: {
output: {
manualChunks: {
// 所有来自 node_modules 的 CSS/SCSS/Less 文件归入 styles.css
styles: [/node_modules\/.*\.(css|scss|sass|less)$/i],
// 可选：把项目内公共样式也收进来（如 src/assets/styles/）
// shared: ['src/assets/styles/']
}
}
}
}
- 正则必须带
i标志，否则大小写敏感（如.CSS不匹配） - 不要只写
styles: ['node_modules']—— 这不会匹配文件后缀，Rollup 会忽略 - 如果用了
@use或@forward的 Sass 包，确保它们最终输出的是 CSS（不是纯变量），否则不会被该正则捕获
禁止在多个地方重复 import 第三方 CSS
你自己的代码是可控入口，也是最容易“补刀”的地方。一旦放任多个文件各自 import 'xxx.css'，就等于主动放弃去重机会。
- 删掉所有组件、页面、工具模块中对第三方 CSS 的
import，只保留在唯一入口：如main.ts或app.vue的顶部 - 确认
index.html中没有同时存在<link href="/xxx.css">—— JS import 和 HTML link 共存会导致浏览器加载两次 - 检查 UI 库文档：像
Element Plus推荐全量引入element-plus/theme-chalk/index.css，而不是每个组件单独import 'button.css' - 对仅提供 SCSS 的包（如
@chakra-ui/css-reset），改用@use "~@chakra-ui/css-reset"并确保 Vite 的resolve.alias配置了~指向node_modules
验证是否真去重成功
别信配置，要看产物。重复打包是否解决，必须通过构建输出反推。
- 运行
vite build --report，打开dist/.vite/report.html，搜索normalize.css或具体类名（如body { margin: 0 }），确认只出现在一个chunk-xxx.css中 - 用
vite build --sourcemap构建，然后在 DevTools → Sources 中展开某个 chunk 的原始 CSS，看其import链是否指向同一个node_modules/xxx/dist/xxx.css - Network 面板刷新页面，过滤
css，确认styles.css（或你命名的 chunk）只加载一次，且体积比之前明显下降
真正容易被忽略的是：即使你配置了 manualChunks，只要某处 import 路径写成 'normalize.css'，另一处写成 'normalize.css/index.css'，Rollup 就认为是两个模块——路径必须完全一致才能合并。
