默认开启 csscodesplit 反而易出问题，因它增加 http 请求、干扰缓存、破坏样式优先级；关闭后所有 css 合并为单文件，仅影响 css 输出粒度，不影响 js 动态导入。
默认开启的 cssCodeSplit 会把 CSS 拆成多份，但多数项目其实不需要——它反而增加 HTTP 请求、干扰缓存命中，还可能破坏样式优先级。
为什么 cssCodeSplit 默认 true 反而容易出问题
这个选项控制的是「是否将不同模块引入的 CSS 拆分成独立 chunk」。Vite 默认设为 true，背后逻辑是 Rollup 的 output.manualChunks 行为：只要 CSS 被不同入口或动态导入引用，就可能生成多个 .css 文件。
常见副作用包括：
- 同一组件在不同路由中加载时，样式被重复打包进多个 CSS chunk，导致体积膨胀
- 多个 CSS 文件加载顺序不可控，
@import或变量覆盖失效 - 现代 CDN 和 HTTP/2 下，单个 CSS 文件比多个小文件更利于缓存复用
- SSR 场景下，服务端无法准确收集所有用到的 CSS，造成 FOUC 或漏样式
关闭 cssCodeSplit 的实际效果与配置方式
设为 false 后，所有 CSS（含 import './index.css'、预处理器、CSS-in-JS 注入）都会合并进一个最终的 style.css（或按你 build.rollupOptions.output.entryFileNames 规则命名），由 Rollup 统一处理依赖图。
配置只需一行：
export default defineConfig({
build: {
cssCodeSplit: false
}
})
注意：cssCodeSplit: false 不影响 JS 的代码分割，import() 动态导入依然生效；它只约束 CSS 的输出粒度。
什么情况下才该保留 cssCodeSplit: true
仅当满足全部以下条件时才建议开启：
- 项目明确按主题拆分（如
theme-dark.css/theme-light.css），且通过 JS 动态切换 - 有大型第三方 UI 库（如 Ant Design）且已用
import('antd/dist/reset.css')显式懒加载其样式 - 构建产物必须适配旧版构建系统（如某些微前端基座强制要求 CSS 按路由隔离）
- 你已用
build.rollupOptions.output.manualChunks精确控制了 CSS 归属，并验证过加载顺序
否则，盲目开启等于把 CSS 缓存策略交给 Rollup 的拓扑排序，而不是你的业务意图。
cssCodeSplit 和 build.rollupOptions.output.manualChunks 的关系
二者不互斥，但优先级不同：cssCodeSplit: false 会直接跳过 Rollup 的 CSS 分块逻辑，manualChunks 对 CSS 无效；而 cssCodeSplit: true 时，manualChunks 才有机会介入 CSS 分组。
例如，下面这段配置在 cssCodeSplit: true 下才起作用：
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'pinia'],
// 这里无法匹配 .css 文件，除非 cssCodeSplit: true
antd: ['antd']
}
}
}
真正想控制 CSS 拆分？不如用 css.preprocessorOptions 做全局变量注入，或靠构建后脚本做 postcss 拆分——比依赖打包器的自动推导更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
