css按需加载样式方案_减少无用样式体积
核心思路是将样式与JS模块对齐，按路由、组件或条件分支做颗粒度控制，确保SSR中CSS chunk与JS chunk严格一致，动态引入CSS需配合lazy加载，避免手动插入，并通过配置PurgeCSS、emotion/styled-components插件及微前端样式加载机制实现真正按需。
怎么让 CSS 只加载当前页面/组件需要的样式
核心思路是打破「全量打包 + 全局注入」惯性，把样式和 JS 模块对齐：按路由、组件、甚至条件分支做颗粒度控制。关键不是「能不能切」，而是「切完会不会漏样式、有没有运行时闪动、构建是否可维护」。
- 服务端渲染（SSR）场景下，
extract-text-webpack-plugin或mini-css-extract-plugin的 chunk 对应关系必须和 JS chunk 严格一致，否则首屏样式缺失 - 客户端路由（如 React Router / Vue Router）中，
import('./Modal.module.css')必须配合React.lazy或defineAsyncComponent，否则动态引入的 CSS 不会触发插入 - 避免在
useEffect或mounted中手动appendChild(link)加载样式 —— 无法参与 webpack 的依赖图分析，热更新失效，且易重复插入
CSS in JS 方案里如何真正实现按需
很多人以为用了 styled-components 或 emotion 就自动按需，其实不然。默认情况下，所有组件样式仍会打包进主 bundle，只是运行时才计算生成 class 名。真按需得配合动态导入 + 样式提取插件。
-
emotion需开启cssProp: true并配置@emotion/babel-plugin，再结合babel-plugin-emotion的autoLabel和sourceMap，才能让 dev 时样式定位准确、prod 时删除未使用规则 -
styled-components的StyleSheetManager+ServerStyleSheet在 SSR 中必须和组件树同步收集，否则collectStyles拿不到子组件样式 - 不要在公共 utils 文件里写
css`...`并到处 import —— 这会让所有用到该文件的模块都带上这段样式，破坏隔离性
PostCSS 插件能否删掉没用的 CSS 规则
可以，但有硬限制：postcss-purgecss 只能删「源码中存在但未被 JS 引用的类名」，对动态拼接类名（如 className={`btn-${type}`}）、运行时计算选择器、或通过 document.querySelector 操作的样式完全无感知。
- 必须显式配置
content字段，指向所有可能含 class 名的文件（src/**/*.{js,jsx,ts,tsx,vue}），漏一个就可能误删 - 第三方 UI 库（如 Ant Design）的图标字体类（
anticon anticon-home）需加进whitelistPatterns，否则图标变方块 - Vue 的
v-if和 React 的{show &&被正确识别；但} React.createElement(type)动态组件名无法被 PurgeCSS 静态分析到
module.exports = {
plugins: [
require(
'postcss-purgecss')({
content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
whitelistPatterns: [/^ant-/],
safelist: ['html', 'body']
})
]
}
微前端或独立子应用中 CSS 隔离与按需的冲突点
子应用单独构建时，mini-css-extract-plugin 会把样式打成独立 .css 文件，但主应用加载子应用 JS 后，并不会自动加载其同名 CSS —— 这就是为什么常见「样式空白」问题。
- 子应用必须导出一个
getExternalStyleSheets()方法，返回['/app1/style.css']等 URL 数组，由主应用统一 fetch + insert - 不能依赖
link[rel=stylesheet]的 onload 事件做后续逻辑，部分浏览器不触发；改用CSSStyleSheet.replace()+replaceSync()更可靠 - 若子应用用了 CSS Modules，类名哈希由本地 webpack 实例生成，主应用无法预测；必须关闭
localIdentName或约定统一 hash seed
