Vue路由懒加载时，CSS需显式用import('./xxx.css')在顶部加载，由构建工具打包为独立chunk并同步注入，确保与JS生命周期对齐、避免样式污染和SSR失效。
Vue 路由懒加载时，import('@/views/Home.vue') 只会按需加载 JS，CSS 默认不会自动跟随——除非你显式声明。直接在组件内 @import 或全局引入，都会破坏“仅当前路由加载”的语义，导致 CSS 提前注入或缓存污染。
在 script setup 里用 import('./xxx.css') 显式加载
这是最干净、与组件生命周期严格对齐的方式。Vite（及 Webpack 5+）会把该 import() 视为资源依赖，打包成独立 chunk，并在组件 JS 加载完成、挂载前同步注入 标签。
- 必须写在
<script setup></script>顶部（不能包裹在函数里），否则 Vite 无法静态分析并拆包 - 路径是相对路径，比如
Home.vue同级的home.css就写import('./home.css')，不是@/assets/css/home.css - 不要用
@import（CSS 规则）或（Vue SFC 语法），它们不参与动态 import 的 chunk 控制 - 如果用了
unhead或@vueuse/core的useHead，可改用useHead({ link: [...] })确保 SSR 下也生效
避免在路由守卫里手动插入
虽然 router.beforeEach 中用 document.head.insertAdjacentHTML 能“看起来”只在进入时加载，但存在几个硬伤：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- CSS 插入时机早于组件挂载，可能触发 FOUC（闪白）或样式错乱
- 离开路由时不会自动移除，多个页面 CSS 累积在
中，造成样式污染 - 刷新页面时，该 CSS 已存在，但组件 JS 还没加载完，样式和结构不同步
- SSR 场景下完全失效，服务端无法执行 DOM 操作
别把 CSS 打包进 JS chunk（如 style-loader）
开发时默认的 style-loader 会把 CSS 内联进 JS，看似“同步”，实则埋雷：
- JS chunk 体积膨胀，抵消懒加载收益（尤其含大量 UI 框架样式时）
- 同一份 CSS 可能被多个异步组件重复打包，浪费网络和内存
- 无法利用浏览器对
的并发加载、预加载、缓存策略 - Vite 默认已禁用此行为；Webpack 项目需检查
vue-style-loader或style-loader是否误启用
真正关键的是：CSS 加载必须和组件 JS 的 chunk ID 绑定，且注入时机必须卡在组件 setup() 执行前。任何脱离模块系统、靠 DOM 操作或运行时拼接的方案，都会在 SSR、缓存、热更新、错误边界等场景露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
