import()加载组件时CSS不会自动注入，需构建工具（Webpack/Vite）配置CSS提取并确保组件内静态import样式文件，才能实现CSS随组件按需加载。
import() 加载组件时，CSS 不会自动按需注入——这是最常被忽略的前提。Webpack 或 Vite 能把 import('./PageA.vue') 关联的 CSS 抽成独立 chunk，但前提是构建配置没关掉 CSS 提取，且你没手动用 style 标签覆盖默认行为。
为什么 import('./PageA.css') 不能直接用
直接 import('./PageA.css') 在大多数构建工具里会报错或静默失败，因为 CSS 文件不是 JS 模块，不支持动态 import。浏览器原生也不认这种写法。真正能动的，是加载 JS 模块（含其内部 import './PageA.css'），由构建工具在打包阶段把 CSS 剥离出来并自动注入。
Vue Router 中路由级 CSS 懒加载的实操要点
Vue 项目里，只要路由配置用了函数式异步组件，CSS 就能跟着走：
-
component: () => import('./views/Dashboard.vue')—— 这个写法本身已触发 Webpack/Vite 的代码分割，只要Dashboard.vue里写了<style scoped>或import './Dashboard.css'，对应 CSS 就会生成Dashboard.[hash].css并在组件加载时自动插入<head> - 确保
mini-css-extract-plugin（Webpack）或build.cssCodeSplit（Vite）开启，否则 CSS 会被打到 JS 里，失去分离意义 - 别在
onMounted里才调import()，得在路由守卫beforeEach或resolve阶段提前触发，给样式留出加载时间
React + React Router v6 怎么让 CSS 和 JS 同步加载
React 默认不自动处理关联 CSS，必须显式协调：
- 用
lazy(() => import('./PageA'))只管 JS，CSS 得额外处理；推荐封装一个loadPage('PageA')函数，返回Promise.all([import('./PageA'), fetch('/static/css/PageA.css').then(r => r.text())]) - fetch 到 CSS 文本后，不能直接
document.write，要创建<style>标签并 append 到<head>，同时监听load事件再渲染组件，避免 FOUC - 更稳妥的做法是用
import('./PageA.module.css')配合css-loader?modules，让类名哈希化并由 JS 控制注入时机，这样样式和组件逻辑真正绑定
动态插入 CSS 时如何避免 FOUC（闪白）
哪怕 CSS chunk 已分离，插入时机不对照样白屏：
立即学习“前端免费学习笔记（深入）”；
- 插入
<link rel="stylesheet">前，在<head>里先加一个临时<style>body { opacity: 0; transition: opacity .2s; }</style> - 监听
link.onload（不是onreadystatechange，Firefox 不可靠），成功后再移除临时样式或设opacity: 1 - 务必加
link.onerror降级逻辑，比如 fallback 到内联关键 CSS 或提示用户刷新 - SSR 场景下，首屏 HTML 必须预置关键 CSS，否则客户端 hydration 前就是裸 DOM
<head> 里。没人手动清理，久而久之就变成样式垃圾场。真要彻底按需，得配合路由生命周期做 link.remove() 或用 CSS-in-JS 库管理挂载/卸载，否则懒加载只是半截子工程。 
