csscodesplit: true仅物理拆分css文件但同步加载，不改善fcp；真正按需加载需动态import()触发css随js chunk异步注入。
默认开启的 cssCodeSplit: true 不会提升首屏速度，反而可能拖慢它——真正起作用的是动态导入触发的 CSS 懒加载，不是配置开关。
为什么 cssCodeSplit: true 看似分包却没改善 FCP
Vite 默认把 cssCodeSplit 设为 true，但它只做物理拆分：构建时生成多个 CSS 文件（如 index-xxx.css、async-xxx.css），但所有文件仍通过 <link rel="stylesheet"> 同步插入 HTML 的 ，浏览器照样阻塞渲染直到全部加载完。
常见错误现象：
- Network 面板看到 5 个 CSS 文件，但 FCP 没变化
- 首屏样式闪白（FOUC）更频繁，尤其在低网速下
- 缓存失效率升高——一个组件 CSS 变了，整个
index.csshash 都变
真正让 CSS 按需加载的唯一方式：动态 import()
CSS 要随 JS chunk 异步加载并注入，必须让它“挂”在动态导入路径上。Vite 会自动把 import('./Modal.vue') 或 import('./dashboard.css') 中的样式打包进对应 chunk，并在该 chunk 加载完成后同步插入 <style></style> 标签。
实操要点：
- 路由级懒加载：用
const Dashboard = () => import('./views/Dashboard.vue')，其内联或@import的 CSS 就会进异步 chunk - 组件级懒加载：弹窗、图表等非首屏组件，改用
defineAsyncComponent(() => import('./components/Chart.vue')) - 避免在
main.ts或入口App.vue中静态import './styles/global.css'——这会让所有样式进主包 - 如果必须全局样式，改用
import.meta.glob('./styles/*.css', { eager: false })手动控制加载时机
什么时候该关掉 cssCodeSplit
绝大多数中后台项目、SSR 应用、或用了 @layer / @import 复杂层级的样式体系，都应设 cssCodeSplit: false。
原因很实际：
- 关闭后所有 CSS 合并为单个
style.css，由 Vite 注入，加载时机可控，FOUC 几乎消失 - 配合 HTTP/2 Server Push 或 preload link（
<link rel="preload" as="style" href="/style.css">）可进一步优化 - 缓存更稳定：业务 JS 变了，CSS 不变，浏览器仍可用旧缓存
- Rollup 不再为每个
import './xxx.css'创建独立 chunk，减少 chunk 数量和运行时开销
build.rollupOptions.output.manualChunks 对 CSS 无效
别试图用 manualChunks 控制 CSS 分割——它只对 JS 模块生效。CSS 的归属完全由「谁 import 了它」决定：
- 被
import('./page.js')触发的 CSS → 进page-[hash].js对应的page-[hash].css - 被
import('./utils.js')触发的 CSS → 进utils-[hash].js对应的utils-[hash].css - 被
main.ts静态 import 的 CSS → 全进index.css（无论cssCodeSplit开关）
所以，想控制 CSS 分布，得改 import 方式，而不是调 manualChunks 参数。
最易被忽略的一点：CSS 是否按需，和文件是否物理拆分无关；关键在「加载时机」——而这个时机，只由 import 是静态还是动态决定。别被 cssCodeSplit 的名字带偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
