csscodesplit: true仅物理拆分css文件，不改变加载时机；真正按需加载必须通过动态import()触发，使样式随对应js chunk异步注入dom，静态引入的css无论拆分与否均同步阻塞渲染。
cssCodeSplit: true 不会让 CSS 按需加载，它只做物理拆分；真正按需加载必须靠 import() 触发的动态 chunk。
为什么开启 cssCodeSplit 后首屏仍卡顿
Vite 默认 cssCodeSplit: true，但这个配置仅影响构建时 CSS 文件是否被拆成多个（如 index.css、async-xxx.css），所有生成的 CSS 仍通过 <link rel="stylesheet"> 同步插入 HTML，全部阻塞渲染。
- Network 面板看到多个 CSS 文件 ≠ 实际加载时机被推迟
- FCP（首次内容绘制）没改善，说明 render-blocking 资源仍在主文档流中
- 根本问题：Vite 不会把静态
@import或import './xxx.css'变成异步行为 - 只有动态导入的模块（如路由组件）内联的
<style></style>，才会被打进对应 chunk 并随 JS 异步注入
让 CSS 真正“按需”的唯一可靠路径
必须用 import() 显式触发代码分割，且样式要写在被动态导入的组件内部。
- Vue Router 示例：
component: () => import('./views/Dashboard.vue')→Dashboard.vue中的<style></style>才会进dashboard-[hash].js和配套 CSS - React Router 同理：
const Dashboard = React.lazy(() => import('./Dashboard')) - 全局样式（如
reset.css、tailwind.css）不能import在入口文件，应改用<link rel="stylesheet">手动引入关键部分 - 第三方 UI 库样式必须跟随组件懒加载，例如：
import('antd/dist/reset.css')，而不是在main.ts里import 'antd/dist/reset.css'
build.rollupOptions.output.manualChunks 对 CSS 完全无效
这个配置只控制 JS 的分块逻辑，对 CSS 的拆分、命名、加载时机毫无影响。
- 你无法用它把
tailwind.css单独拎出来，也不能让它延迟加载 - 试图通过
manualChunks影响 CSS 归属，属于方向性错误 - 如果项目有主题切换需求（如 dark/light），CSS 分离应靠 JS 动态
link切换，而非依赖构建配置 - 真正可控的 CSS 分割点只有两个：动态
import()的边界 + 组件级<style></style>作用域
最容易被忽略的一点是：CSS 是否“按需”，不取决于它有没有被拆成多个文件，而取决于它是否和某段 JS 逻辑绑定、并在该 JS 加载时才注入 DOM。静态引入的样式，无论拆得多细，都逃不开首屏阻塞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
