路由懒加载时CSS不自动拆分，因构建工具默认将所有CSS归入主chunk；Webpack需配置mini-css-extract-plugin，Vite需启用cssCodeSplit，且组件内CSS须显式import才能随JS按需加载。
路由懒加载时 CSS 为什么没跟着拆分？
默认情况下，import('../views/Home.vue') 或 import('./Dashboard.tsx') 只会拆分 JS 模块，CSS 不会自动跟随拆分——因为构建工具（如 Webpack/Vite）默认把所有 import './xxx.css' 都收集进主 CSS chunk。结果就是：首页加载了 home.js，但样式仍从体积庞大的 app.css 中读取，白屏时间没改善。
Webpack 项目必须配 mini-css-extract-plugin
这是实现 CSS 按路由拆分的硬性前提。不启用它，CSS 始终以 <style> 标签内联在 JS 中，无法生成独立 CSS 文件。
- 确保 Webpack 配置中已启用
MiniCssExtractPlugin.loader替代style-loader，尤其在production模式下 - 检查
optimization.splitChunks是否禁用了 CSS 分离（比如设置了cacheGroups.styles.enforce = false） - Vite 用户不用手动配插件，但需确认未开启
build.cssCodeSplit: false
组件内 CSS 必须用 import 语句显式引入
像 Vue 的 <style scoped> 或 React 的 CSS Modules，如果写在组件文件里但没通过 import 加载（例如 SFC 中的 style 标签），构建工具无法识别其“模块归属”，也就无法将其挂到对应路由 chunk 下。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 推荐写法：
import './Home.module.css';（CSS Modules）或import './Home.scss';（普通 Sass）放在组件 JS/TS 文件顶部 - 避免把全局样式（如 reset.css、variables.scss）也塞进路由组件里，它们应保留在入口统一引入
- Vue SFC 若坚持用
<style>，需确认构建配置支持vue-style-loader与mini-css-extract-plugin协同工作
验证是否生效的关键检查点
光看打包体积数字容易误判。真正要确认的是：访问 /dashboard 时，网络面板里是否只加载了 dashboard.js 和 dashboard.css，而没触发 app.css？
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器 DevTools → Network → 过滤 CSS，刷新目标路由页面，观察加载的 CSS 文件名和大小
- 检查生成的 HTML 中
<link rel="stylesheet">标签是否动态注入（懒加载路由对应的 CSS 应该是 JS 动态插入的，不是 HTML 静态写的） - 注意 SSR 场景：服务端首次渲染时，若没做样式提取同步，可能漏掉关键 CSS 导致 FOUC
import 而是靠框架隐式处理，这种写法在开发时完全正常，上线后却让懒加载失效。 
