多个懒加载组件打包出重复css是因为vite默认不合并动态导入中的css，需通过manualchunks显式提取公共样式并统一引入路径。
重复CSS不是懒加载“导致”的，而是打包时没把共用样式归到同一 chunk，Vite 默认行为无法自动合并跨异步组件的 import './xxx.css'。
为什么多个懒加载组件会打包出重复 CSS？
当 ComponentA.vue 和 ComponentB.vue 都写了 import './base.css'，且它们是通过 defineAsyncComponent 或路由 component: () => import(...) 加载时，Rollup 会为每个组件生成独立 chunk，而默认配置下，这些 CSS 会被分别打进各自的 JS chunk 里，最终产出多份相同内容的 chunk-xxx.css。
- 不是浏览器加载重复（开发时 ESM +
<link>自动去重），而是构建产物物理文件重复 -
build.cssCodeSplit = true（Vite 4.0+ 默认）只对非动态导入中的 CSS 生效，对import()内部的 CSS 不起作用 - PostCSS 的
@import合并只在编译期生效，不解决打包时模块级重复
用 manualChunks 强制提取公共 CSS
在 vite.config.ts 中显式定义样式 chunk，让所有匹配路径的 CSS 模块强制归入同一个输出文件：
build: {
rollupOptions: {
output: {
manualChunks: {
styles: [
'src/assets/styles/', // 所有放在这里的全局样式
/node_modules\/.*(?:sass|css|less)/i // 第三方库的样式（如 element-plus/theme-chalk）
]
}
}
}
}
- 确保
src/assets/styles/base.css、variables.css等被统一 import 在main.ts，而不是散落在各个懒加载组件里 - 避免在懒加载组件中写
import 'element-plus/theme-chalk/button.css'，改用完整引入import 'element-plus/theme-chalk/index.css' - 正则
/node_modules\/.*(?:sass|css|less)/i要加i标志，否则可能漏匹配大小写混合的路径
验证是否真有重复，别靠猜
运行 vite build --report，打开生成的 dist/.vite/report.html，搜索具体类名（如 .btn）或文件名（如 button.css），看是否出现在多个 chunk 列表中。
- 同时开
npm run build -- --sourcemap，在 DevTools → Sources 中点开某个chunk-xxx.css，查看原始引用链，确认是不是来自不同组件 - 检查 Network 面板加载的 CSS 文件数量：如果看到
chunk-abc.css和chunk-def.css都含相同 reset 规则，就是没拆对 - 注意：HTML 中手动写的
<link rel="stylesheet">会绕过所有打包逻辑，直接引入——务必删掉
真正难的是路径匹配粒度和第三方库样式的收敛方式。比如 Ant Design Vue 的按需样式 import 和 unplugin-vue-components 的 resolver 行为不一致，就容易漏进某个 chunk；manualChunks 里的正则写错一个斜杠，整个 node_modules 样式就回退到默认打包逻辑。动手前先跑一遍 report，比调半天配置更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
