确认class未被JS引用需动态调试+全局搜索+构建产物分析+E2E验证，禁用html-minifier的removeEmptyAttributes，警惕无障碍、CSS-in-JS和SSR hydration风险。

直接删 class 和 style 属性不安全，哪怕它们在 CSS 文件里没定义规则——JS 可能正通过 classList.toggle 或 element.style.color 动态操作它们。

怎么确认某个 class 真的没被 JS 引用

别只搜 HTML 源码。很多 class 是运行时注入的，静态扫描根本抓不到：

• 在 Chrome DevTools Elements 面板右键目标元素 → “Break on” → “Attribute modifications”，然后点按钮、划区域、切 Tab，看是否触发断点
• 全局搜索 querySelector(".xxx")、getElementsByClassName("xxx")、classList.add("xxx")、className.includes("xxx")
• 检查构建产物（如压缩后的 main.js）：用 grep -o "xxx" dist/main.js | wc -l 粗筛，再结合 source map 定位真实调用位置
• 临时把 class="xxx" 改成 class="xxx__dead"，跑 E2E 测试 + 手动走一遍登录、弹窗、折叠菜单等关键路径

删空 class 和空 style 的正则陷阱

VSCode 里用正则批量清理快，但几个典型误伤点必须人工过一遍：

• 删空 class：class\s*=\s*["']["'] → 安全；但 class\s*=\s*["']\s*["'] 才能匹配前后带空格的 class=" a b "
• 删空 style：style\s*=\s*["'][^"']*?["'] 会干掉 style="display:none" —— 这类常是 JS 控制显隐的核心开关，不能硬砍
• 内联 style 中的“冗余声明”如 font-weight:normal、color:#000，正则无法判断是否被 JS 覆盖，建议用 posthtml 插件或自定义 AST 脚本处理
• 跳过
  、、 内容区，它们依赖原始空白和引号，正则一扫就崩

html-minifier 的 removeRedundantAttributes 别乱开

它只删 HTML5 规范里明确标记为“可省略”的语义冗余属性，比如：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• <script type="text/javascript"></script> → 删 type
• → 删 type
• → 删 charset（但保留 标签本身）

但它 不会 碰 class=""、data-id=""、id="" —— 这些空属性常被测试脚本、CSS 选择器或 SSR hydration 依赖。如果同时开了 removeEmptyAttributes: true，就等于主动埋雷。

清理后最容易翻车的验证点

不是“页面看起来正常”，而是那些你平时根本注意不到、但一断就全链路失效的地方：

• 无障碍：用屏幕阅读器试读，确认 aria-labelledby 指向的元素还在，role="tablist" 下的 tab 元素没因 class 删除而丢失状态样式
• CSS-in-JS：Emotion、Styled-components 生成的动态 class 名可能被 purgecss 误判，需检查构建产物中是否残留未引用的哈希 class
• SSR hydration：客户端挂载时，若 DOM 结构与服务端输出不一致（比如删了某个空 div class="loading"），React/Vue 会降级为客户端渲染，首屏变慢甚至闪白
• 条件分支里的 class：搜 if.*process.env.NODE_ENV 或 if.*false 块，里面加的 class 往往已失效，但 Coverage 工具看不到

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！