Vite开发时import './style.css'快因ESM内联注入，生产却合并进主chunk导致同步阻塞；真正按需需CSS绑定动态导入模块生命周期，随async chunk异步加载注入。
为什么直接 import './style.css' 在开发时很快，但构建后首屏仍卡
因为 Vite 开发服务器用的是原生 ESM + 内联 注入，样式修改能 HMR 立即生效；但生产构建时，默认会把所有静态 import 的 CSS 合并进主 chunk（比如 index-xxx.css），哪怕它只被某个路由页用到。浏览器仍得同步下载、解析、阻塞渲染——这和“现代浏览器特性”无关，是加载时机没对齐。
真正利用现代浏览器特性的关键，不是“支持 ESM”，而是**让 CSS 加载时机匹配用户实际需要的时刻**。这就要求 CSS 必须随 JS chunk 一起异步加载、注入，而不是靠 link 标签强制同步。
- 静态
import './global.css'→ 进主包 → 首屏必载 → render-blocking - 动态
import('./views/Report.vue')→ 其内或import './report.module.css'→ 打包进 async chunk → 加载时才注入 - 第三方 UI 库样式（如
element-plus/dist/index.css）必须和组件一起动态导入，否则永远进vendor或主包
cssCodeSplit: true 到底拆了什么？它不解决首屏阻塞
Vite 默认开启 cssCodeSplit: true，但它只做物理拆分：把不同异步 chunk 中的 CSS 拆成独立文件（如 async-123.css、async-456.css），并不改变加载方式。这些文件依然通过 同步插入 HTML，浏览器照常阻塞渲染。
你能在 Network 面板看到多个 CSS 文件，但 FCP 没变快，就是因为它们仍是同步加载的。
- 这个配置对
build.rollupOptions.output.manualChunks无效：它只管 JS 分包，不管 CSS 归属 -
assetFileNames: 'assets/css/[name].[hash].css'只改文件名，不改加载逻辑 - 真正控制 CSS 是否“按需”的唯一开关，是 JS 模块是否用
import()动态加载
如何让 CSS 真正“随需而动”：路由与弹窗场景实操
核心原则：CSS 必须绑定在动态导入的模块生命周期里。Vite 会在打包时自动把该模块内所有样式（、import './xxx.css'、@import）收集进同一 chunk，并在 import() resolve 后立即插入 标签。
- Vue Router：
component: () => import('./views/Dashboard.vue')→ Dashboard.vue 的和import './dashboard.module.css'全进 async chunk - React Router：
const Dashboard = React.lazy(() => import('./Dashboard'))→ 同理，其内部样式不会进主包 - 弹窗组件：
const ModalContent = () => import('./components/ChartModal.vue')→ 关闭弹窗后，对应 CSS 不会自动卸载（这是浏览器限制），但至少首次打开前不加载 - 避免在
main.ts或 Layout 组件里import 'ant-design-vue/dist/reset.css'—— 它会立刻进主包
关键但容易被忽略的细节：HMR 与生产行为不一致
开发时你改一个 .module.css，HMR 会热替换 标签内容，非常快；但生产环境没有 HMR，只有“加载即生效”。这意味着：
- 如果你依赖 CSS 变量或
@layer的级联顺序，动态加载的 CSS 插入时机可能影响最终样式计算（比如 Tailwind 的@layer base被后加载的组件样式覆盖） - 服务端渲染（SSR）场景下，动态导入的 CSS 不会出现在初始 HTML 中，需配合
vite-plugin-ssr或手动提取 critical CSS - Chrome DevTools 的 “Coverage” 面板能帮你识别哪些 CSS 规则实际未被使用，但注意：它只反映当前页面路径，不能代替真实用户路径遍历
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
