不能只靠 chrome coverage 面板直接删 css，它仅反映单次加载快照；需多尺寸刷新、触发所有交互状态、遍历 spa 所有路由，并结合 purgecss 安全配置、动态类名处理及灰度监控交叉验证。
不能只靠 Chrome Coverage 面板直接删 CSS，它只反映单次加载快照，不是“真没用”。
Chrome Coverage 只能当线索，不能当判决书
Coverage 显示某条规则标红（0% 使用），常见原因包括：当前视口没触发媒体查询、@supports 条件不满足、伪类（如 :hover）未激活、或 JS 动态插入的 class 还没挂载。它甚至会把注释里的选择器也计入统计。
必须做这几件事才能信任 Coverage 数据：
- 在桌面/移动端不同尺寸下分别刷新并点「Reload coverage」
- 手动触发所有交互状态：展开折叠菜单、提交表单、切换暗色模式、模拟 loading/error 成功态
- 对 SPA 项目，要逐个访问所有路由后再汇总结果，不能只测首页
- 看到标灰的规则，先去对应组件的
.vue或.jsx文件里搜 class 名，确认是否被 JS 拼接或条件渲染
PurgeCSS 配错 content 路径 = 白删 + 崩样式
它不执行 JS，只扫描字符串字面量。漏配一个 .html 或 .tsx 路径，就会把本该保留的 class 当死代码删掉。
Webpack 项目典型安全配置要点：
- 用
glob-all替代手写数组，确保覆盖src/**/*.{html,js,jsx,ts,tsx,vue} -
paths里别写node_modules—— 第三方库的 class 往往由运行时 JS 注入（比如 antd 的ant-tabs-tab-active） - 必须设
rejected: true，构建日志里会输出removedSelectors，人工盯一遍有没有明显在用的类名 - 白名单用正则，不是字符串：
whitelistPatterns: [/^ant-/, /^is-/, /^js-/]，否则ant-collapse-header这种会被误杀
动态类名（React/Vue/Tailwind）必须走 safelist
像 className={`btn btn--${status}`} 或 :class="{ 'is-open': isOpen }"，PurgeCSS 看不到 status 可能是 error，就直接把 btn--error 删了。
应对方式分场景：
- Vue +
scoped：不用管，样式天然隔离；但全局样式文件（如src/assets/styles/global.css）仍需 PurgeCSS 处理 - Tailwind：弃用独立 PurgeCSS，改用
tailwind.config.js的content字段——它基于 AST 解析，能识别模板字符串和属性绑定 - React + CSS Modules：类名已哈希化，无需 PurgeCSS；重点清理的是
import './reset.css'这类全局引入 - 图标类（
icon-home）、状态类（loading、disabled）统一加前缀（如old-icon-），上生产后监控 7 天零调用再真删
老项目批量清理得靠灰度 + 监控，不是一键删除
直接删源码风险极高：后台页弹窗、打印样式表（@media print）、iframe 子页面、甚至被遗忘的管理后台路径，都可能依赖某条看似“闲置”的规则。
稳妥做法是三步走：
- 用 PostCSS 插件自动给待清理类名加前缀（如
old-xxx），并开启 CSS 模块化隔离 - 在 Nginx 或 CDN 日志中埋点，监控含
old-的页面 PV 和 JS 报错（比如ReferenceError: old-button） - 确认连续 7 天无调用、无报错，再执行 Git 删除；同时打 tag 记录本次清理范围，方便回滚
真正难的从来不是工具怎么跑，而是判断「这条规则到底在哪个角落被谁悄悄用了」——Coverage 给你红线，PurgeCSS 给你删法，但最终拍板得靠人眼+日志+灰度数据交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
