组件懒加载本身不会导致公共 css 重复打包，真正原因是未正确配置 css 提取与复用机制，如多个异步组件各自引入相同基础样式时，vite 默认配置可能将其分别打进不同 chunk。
组件懒加载本身不会导致公共 CSS 被重复打包，真正的问题出在 未正确配置 CSS 提取与复用机制，尤其是当多个异步组件各自引入了相同的基础样式（如 reset.css、工具类、UI 组件库局部样式）时，Vite 默认的 rollup 配置可能将其分别打进各自的 chunk 中。
确保 CSS 被统一提取到独立文件
Vite 默认使用 build.cssCodeSplit = true（Vite 4.0+），但该选项仅对 非内联、非动态导入中直接 import 的 CSS 生效。如果懒加载组件内部写了 import './Button.css'，且多个组件都这么写，就容易触发重复打包。
- 把全局/公共样式（如 base.css、variables.css、通用工具类）统一放在
src/assets/styles/下，并在main.ts或app.vue中一次性导入 - 禁用按需引入 UI 库的样式（如 Element Plus 的
import 'element-plus/theme-chalk/button.css'），改用完整引入或 CSS-in-JS 方案 - 检查
vite.config.ts是否保留默认的build.rollupOptions.output.manualChunks，避免误将 CSS 拆进 JS chunk
用 manualChunks 主动隔离公共样式逻辑
通过显式定义 manualChunks，可强制把跨组件共用的样式模块（及其依赖）归入同一 chunk，防止被多次打包。
- 在
build.rollupOptions.output.manualChunks中为 CSS 相关路径单独建块：styles: ['src/assets/styles/', /node_modules\/.*(?:sass|css|less)/i] - 若使用 PostCSS 插件（如
postcss-preset-env）或 CSS 预处理器，确保它们不生成重复的 @import 内容 - 对第三方组件库（如 Ant Design Vue），优先使用其提供的「全量样式入口」而非单个组件样式，再配合
unplugin-vue-components自动导入组件时跳过样式
验证是否真有重复 CSS：看构建产物和 sourcemap
别只凭直觉判断“CSS 重复”，要实锤：
- 运行
vite build --report，打开dist/.vite/report.html，搜索关键词如button.css或类名，看是否出现在多个 chunk 中 - 用
npm run build -- --sourcemap生成 sourcemap，打开浏览器 DevTools → Sources → 查看某个 chunk 的原始 CSS 引用链 - 检查 network 面板加载的 CSS 文件数量和体积，重点关注
chunk-xxx.css是否存在语义重叠（如都含.btn {}）
进阶：用插件做 CSS 去重与合并
对复杂项目，可引入轻量插件辅助治理：
-
rollup-plugin-css-only：把所有 CSS 提取为单个文件，禁用内联注入（适合纯 CSS 项目） -
unplugin-vue-components+unplugin-auto-import配合dirs: []和imports: []关闭自动样式导入 - 自定义 Rollup 插件，在
generateBundle钩子中读取所有 CSS chunk，用csso或正则合并重复规则（慎用，易破坏 BEM/Scoped）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
