路由切换时CSS不会自动卸载，必须依赖构建工具配合动态import实现按需加载：需确保JS组件异步加载、CSS被抽离为独立chunk（如Webpack配mini-css-extract-plugin、Vite开启cssCodeSplit），并通过BEM或CSS Modules保障作用域隔离。
路由切换时 CSS 不会自动卸载，必须靠构建工具配合动态 import 才能真正按需加载 —— 否则你写的 import('./views/Dashboard.css') 可能只是“引入了”，但没“拆出去”，更不会“随组件卸载”。
为什么直接 import CSS 文件在路由里不生效
很多人以为在异步组件里写 import('./Dashboard.css') 就能按需加载样式，结果发现首屏体积没变、样式还全局污染。问题出在两处：
- Webpack/Vite 默认不会为纯 CSS 文件生成独立 chunk，除非它被 JS 模块显式引用且该 JS 本身是 dynamic import 的目标
- 即使 CSS 被抽成 chunk，若没启用
mini-css-extract-plugin（Webpack）或没配cssCodeSplit: true（Vite），它仍会打进主 bundle - 就算 chunk 出来了，浏览器插入
<style></style>标签后不会自动移除 —— 没有“CSS 卸载”机制，除非你手动管理
Vue Router 中配合 dynamic import 正确加载路由级 CSS
关键不是“怎么引入 CSS”，而是“让构建工具识别这是路由边界”。只有当 JS 组件本身是 defineAsyncComponent 或 import() 动态加载的，关联的 CSS 才会被当作路由 chunk 处理。
- 写法必须是：在路由配置中用
component: () => import('./views/Dashboard.vue')，而不是component: Dashboard -
Dashboard.vue内部可以import './Dashboard.css'，也可以用<style src="./Dashboard.css"></style> - 确保构建配置启用 CSS 分割：Webpack 要有
mini-css-extract-plugin；Vite 默认开启，但得确认build.cssCodeSplit没被设为false - 验证方式：构建后看
dist/目录下是否有类似src_views_Dashboard_vue.abc123.css这样的文件，且 HTML 中只在访问该路由时才插入对应<link rel="stylesheet">
动态插入 CSS 后如何避免残留和冲突
CSS 按需加载容易忽略卸载环节 —— 用户离开路由后，对应的 <style></style> 标签还挂在 里，可能干扰后续视图。
立即学习“前端免费学习笔记（深入）”；
- Vue Router 4 的
beforeRouteLeave或onBeforeRouteLeave钩子里，无法直接删 style 标签，因为构建工具插入的 link 是静态的，没留引用 - 真正可控的方式是：改用运行时 style injection，比如在组件
onMounted里用document.head.appendChild(styleEl)，onUnmounted里styleEl.remove() - 但注意：这样绕过了构建工具的 CSS 提取，无法利用 CSS 压缩、source map、postcss 等能力，适合小范围主题切换或实验性功能，不适合主路由样式
- 更稳妥的做法是接受“CSS 不卸载”，靠 BEM 或 CSS Modules 保证作用域隔离，把“不污染”当作设计前提，而非依赖运行时清理
懒加载 CSS 时容易踩的兼容性坑
某些构建配置看似正确，但实际在低版本浏览器或 SSR 场景下失效。
- Vite 在
ssr: true模式下，import('./xxx.css')会静默失败，因为服务端不执行 CSS 插入逻辑 —— 必须改用import('./xxx.module.css')并确保css.modules.generateScopedName开启 - Webpack 5 的
lazyCompilation开启后，CSS chunk 可能延迟生成，导致开发时 HMR 失效或样式闪烁 - 如果用了
vue-style-loader（非 mini-css-extract），热更新时会反复 append 新<style></style>，造成内存泄漏 —— 生产环境必须切到 extract 模式 - 移动端 WebView（如微信 iOS）对大量
<link>并发加载敏感，建议单个路由 CSS 控制在 10KB 以内，超限就拆成组件级局部样式
真正难的不是“怎么让 CSS 按路由加载”，而是判断哪些样式值得拆 —— 公共布局、字体图标、重置样式这些，强行拆只会增加 HTTP 请求和解析开销；只有绑定具体业务视图、且体积明显（>2KB）、复用率极低的 CSS，才适合走这趟动态链路。
