react 19 中真正按需加载 css 需结合 css modules（如 button.module.css）与动态加载（lazy + suspense），仅 import './button.css' 是全局注入、非按需；import styles from './button.module.css' 才启用局部作用域并支持组件级样式隔离。
React 19 中 import './Button.css' 是全局引入，不是按需
这种写法会把整个 Button.css 注入全局样式表，哪怕组件没渲染，样式也已生效。它不区分“用没用到”，只管“导没导入”。尤其在 SSR 或动态路由场景下，容易造成未挂载组件的样式提前污染 DOM。
真正按需的前提是：样式只在组件挂载时注入、卸载时移除，且类名不与其他组件冲突。普通 import './xxx.css' 完全做不到这点。
- ✅ 正确路径：用 CSS Modules（
Button.module.css） + 动态加载逻辑（如lazy+Suspense配合） - ❌ 错误认知：“只要文件小，import 就算按需”——体积小 ≠ 作用域受控 ≠ 加载时机可控
- ⚠️ 注意：Vite 和 Webpack 默认对
.module.css做哈希+局部作用域，但对.css文件一律走全局 pipeline
如何让 CSS Modules 真正“按组件粒度”加载
CSS Modules 本身不控制加载时机，只解决作用域问题。要实现“组件级按需”，必须结合 React 的懒加载机制。
- 把组件和它的
.module.css放在同一目录下，确保路径可预测（如./Button/Button.module.css） - 用
React.lazy包裹组件，同时确保构建工具（Vite/Webpack）能提取并异步加载对应 CSS —— Vite 默认支持，Webpack 需配mini-css-extract-plugin的异步 chunk 模式 - 不要在父组件里提前
import './Button.module.css'，否则模块会随父组件一起打包，失去“按需”意义 - 示例：
const Button = React.lazy(() => import('./Button'));此时Button.module.css会随Button.js一起被打包进同一个异步 chunk
第三方 CSS 框架（如 Tailwind、Bootstrap）怎么按需
Tailwind 和 Bootstrap 本身是“设计系统级”的全局 CSS，它们的“按需”不是靠 JS 加载控制，而是靠构建时剔除未使用的规则。
- Tailwind：依赖
content配置扫描 JSX/TSX 中实际出现的 class 名，未命中的 utility class 在构建时被 PurgeCSS 删除 —— 这才是真正的按需 - Bootstrap：不能靠
import 'bootstrap/dist/css/bootstrap.min.css'，而应@import 'bootstrap/scss/buttons'（配合 Sass loader），或用react-bootstrap这类封装库，它内部只导入用到的 JS + CSS - ⚠️ 警惕：在 React 19 中，若用
createRoot+hydrateRoot做 SSR，全局 CSS 必须在服务端和客户端都存在，否则 hydration mismatch；而 CSS Modules 的哈希类名天然兼容 SSR
为什么 import styles from './X.module.css' 不能写成 import './X.module.css'
后者看似省事，实则破坏了模块化前提：类名不会哈希，所有组件共用原始类名（如 .btn），等于退化成全局 CSS。
-
import styles from './X.module.css'→ 返回一个对象：{ btn: 'X_btn__abc123' }，JS 层可控 -
import './X.module.css'→ 返回undefined，样式虽注入，但类名无隔离，无法防止冲突 - 更隐蔽的坑：
import * as styles from './X.module.css'在 CRA 中返回空对象，在 Vite 中行为不一致 —— 始终用默认导入 - 动态拼接 className 时，务必检查
styles.xxx是否存在，建议用clsx(styles.btn, styles[variant])或三元判断，避免undefined被转成字符串参与拼接
React 19 的按需核心不在“怎么 import”，而在“谁触发 import”和“样式是否与组件生命周期绑定”。很多团队卡在第一步就误以为用了 .module.css 就万事大吉，其实只是解决了命名冲突，离真正按需还差一层加载策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
