React.lazy 本身不支持懒加载 CSS，但可通过将 CSS 与懒加载组件绑定（如组件内 import 样式或使用 CSS Modules），使其随组件 chunk 一同按需加载；全局 CSS 需通过预加载、动态插入或提取关键 CSS 等方式优化。
React.lazy 只能懒加载 JS 模块，无法直接懒加载 CSS。CSS 的加载行为由构建工具（如 Webpack、Vite）和打包策略决定，不是运行时可控的独立资源。
但你可以通过「让 CSS 与懒加载组件绑定」来实现等效效果——即：只有当某个路由组件被 import() 加载时，它所依赖的 CSS 才被打包进对应 chunk，并随 JS 一起请求。
路由组件内联样式或 CSS Modules 不会触发额外 CSS 请求
如果你在懒加载组件里写的是：
import './Dashboard.module.css'- 或直接用
styled-components/emotion的 css-in-js 方式
Webpack/Vite 默认会把这类样式自动提取并注入到该 chunk 的 JS 中（通过 style-loader 或 mini-css-extract-plugin 配置控制）。只要组件没加载，这部分 CSS 就不会执行、也不会插入 DOM。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
立即学习“前端免费学习笔记（深入）”；
全局 CSS（如 reset.css、theme.css）仍会在首屏加载
这类 CSS 通常被 import 'xxx.css' 写在入口文件（index.js 或 App.js）里，构建时会被打包进主 chunk，无法懒加载。想避免它拖慢首屏，只能：
- 把真正首屏必需的样式内联到 HTML 的
<style></style>标签中（critical CSS） - 其余全局样式改用
link rel="preload"或动态createElemen('link')延后加载 - 确保它们不阻塞渲染（
media="print"+ onload 切换，或用onload回调激活）
Webpack 构建时必须启用 CSS 分割
否则所有 CSS 都会打进 main.css，懒加载组件的样式也会被提前合并进去。检查你的配置：
- 使用
MiniCssExtractPlugin替代style-loader（生产环境） - 确保
splitChunks.chunks === 'all'，且未禁用cacheGroups.styles - Vite 用户需确认
build.cssCodeSplit: true（默认开启）
容易踩的坑
- 在懒加载组件外提前
import了它的样式文件（比如在routes.js里写了import './Foo.css'）→ 这会让 CSS 提前打进主包 - 使用了第三方 UI 库的全量 CSS（如
import 'antd/dist/reset.css'）→ 必须按需引入，或用插件（babel-plugin-import）配合 - 开发环境看到 CSS 似乎“同步加载”，是因为 HMR 或 style-loader 注入方式掩盖了真实行为；要验证是否真懒加载，得看构建产物的 chunk 文件名和 network 面板中 CSS 请求是否只在路由切换后出现
真正起作用的不是“懒加载 CSS”这个动作，而是让 CSS 和懒加载组件共存于同一个动态 import chunk 中。一旦你删掉组件里的样式引用，或者把它挪到公共层，这个绑定就断了。
