cssnano 的 --stats 模式可精准定位冗余 CSS 规则，需配合 --preset advanced 和 postcss-import 展开嵌套，输出中 removed: true 且 reason: "duplicated" 的即为高优先级人工核查项。
怎么用 cssnano 的 stats 模式看冗余规则
直接跑压缩不是目的，关键是定位“哪部分 CSS 写得又多又没用”。cssnano 自带的 --stats（需配合 CLI 或 PostCSS 配置）能输出每条规则的压缩前后字节数、是否被移除、是否因重复/无效被丢弃。
常见错误现象：以为删了注释、空格就瘦身了，结果发现 gzip 后体积几乎不变——说明冗余在语义层，比如大量未使用的组件类、重复的 margin 覆盖、带浏览器前缀的过时写法。
- 必须加
--preset advanced，否则默认 preset 不触发深度分析逻辑 - 对
@import多层嵌套的文件，要先用postcss-import展开再统计，否则只扫入口文件 - 输出里
removed: true且reason: "duplicated"的行，就是最该人工核对的重复块
purgecss 扫描不到类名？检查这三处动态拼接
purgecss 本质是字符串匹配，一旦类名是运行时拼出来的，它就看不见。这不是工具不行，是使用方式越界了。
典型使用场景：Vue/React 项目里用 class="btn btn--${type}"、classNames("card", `card--${size}`)、或者 Tailwind 的 class={`${base} ${isActive ? 'active' : ''}`。
立即学习“前端免费学习笔记（深入）”；
- 配置里必须显式声明
dynamicClasses: true（v5.0+），否则连最基础的模板字符串都不识别 - 正则白名单别只写
/^btn-/，要覆盖所有可能生成的组合，比如/^(btn|card|form)--(primary|sm|disabled)$/ - HTML 模板若存在
v-html或dangerouslySetInnerHTML渲染的 class 字符串，必须手动加到content配置的字符串数组里，不能只依赖文件路径扫描
Chrome DevTools 的 Coverage 面板为什么不准
它只记录当前页面加载和交互过程中「实际执行」的 CSS 规则，但大型项目里很多样式是为路由、弹窗、暗色模式等条件分支准备的——这些分支没触发，就被标成“未使用”，误杀率高。
性能影响很明显：按 Coverage 报告删掉 30% 样式后，点开某个抽屉菜单直接样式错乱，因为那部分 CSS 被提前干掉了。
- 务必开启所有功能路径：登录态/游客态、移动端/桌面端视口、深色/浅色主题切换后再录一次覆盖率
- 注意
@media查询里的规则，Coverage 默认不模拟媒体查询变化，要手动在响应式调试工具里切几次尺寸再刷新统计 - 如果用了 CSS-in-JS（如 Emotion），Coverage 只能抓到插入
<style></style>的部分，JS 里定义但未挂载的样式完全不可见
Webpack 插件 webpack-bundle-analyzer 看 CSS 体积的陷阱
它把 CSS 当作资源打包进 chunk，但不会拆解单个 CSS 文件内部结构。你看到 “vendor.css 占 420KB”，却不知道其中 280KB 是某个废弃组件的遗留样式，还是 30 个图标字体的 base64 编码。
兼容性问题常出现在 CSS Modules 场景：插件显示的是模块 ID 和哈希名（如 Button__root__abc123），但原始源码里根本找不到这个字符串，无法反向定位。
- 启用
stats: { all: true, assets: true }并导出 JSON，用脚本过滤出assetsByChunkName中含.css的项，再结合source-map-explorer定位具体规则来源 - 如果用了
mini-css-extract-plugin，确保chunkFilename配置带[name]，否则所有 CSS 合并成一个 chunk，失去模块归属 - 注意 sourcemap 类型：
source-map最准但构建慢，eval-source-map在 CSS 分析中会丢失原始文件路径
真正难的不是工具链怎么搭，是得区分“技术上可删”和“业务上敢删”——比如一个写了 /* @deprecated */ 的类，可能正被第三方 iframe 通过 class 名调用，删了线上就裂。这种得靠文档沉淀+跨团队对齐，工具扫不出来。
