可借助浏览器开发者工具 Elements 面板 Ctrl+F 搜索 class=，重点检查 div/span/section 元素中高频重复、无 JS/CSS 依赖的类（如 mt-2、flex）；避免正则误删注释或 JS 字符串中的 class；推荐用 ponytail 在构建期归一化合并，配合 DOMParser 安全处理。
怎么识别哪些 class 是重复又无用的
浏览器开发者工具里打开 Elements 面板，Ctrl+F 搜 class=，重点看三类节点：div、span、section。如果某个 class 名在多个相邻或同级元素上反复出现（比如 mt-2、px-4、text-sm 连续套 3 层），且没有 JS 绑定事件或 CSS 特殊选择器依赖，基本就是冗余。
常见误判点：
- 以为带
!important就不能删——其实可能是父级规则没写对，删掉后反而暴露了真正问题 - 看到 Tailwind 类名就默认“有用”，但
flex flex-col gap-2和外层容器已有display: flex时，子项再写flex就是空转 - 把 CMS 导出 HTML 里的
class="MsoNormal MsoTableGrid"当真，这类 Word 转换残留几乎从不参与样式计算
用 ponytail 在构建期自动合并重复 class
ponytail 不是运行时工具，它在打包阶段解析 HTML 树，按白名单规则重写 DOM。要合并重复 class，关键不是删，而是归一化。
配置示例（ponytail.config.js）：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
attributes: {
class: {
// 合并逻辑：遇到重复类名，只保留一次；顺序按首次出现位置
transform: (value) => [...new Set(value.split(/\s+/))].join(' ')
}
}
}这样处理后，<div class="mt-2 px-4 mt-2"> 会变成 <code><div class="mt-2 px-4">，而不是暴力清空。<p>注意：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>必须配合 <code>parseAsHtml: true，否则它当纯文本处理，无法识别 class 属性结构
css 属性做同样操作，会破坏哈希类名transform 函数里别调用 DOM API，ponytail 运行在无 DOM 环境（Node 或 Worker）手动清理时，为什么 replace(/class="([^"]*)"/g, ...) 很危险
正则匹配 class 属性看似简单，但 HTML 中 class 可能出现在注释里、JS 字符串里、甚至 <style></style> 块中。直接全局替换极易误伤。
典型翻车场景：
- 匹配到
<!-- <div class="hidden"> -->，结果把注释也替换了 - 遇到
const html = '<div class="btn">';，JS 字符串被当 HTML 处理<li>属性值含转义引号：<code>class="btn "primary""，正则没处理实体，截断失败 - 对
data-id、data-key等明确要求唯一性的属性，加required: true+unique: true - 对
data-track，用merge: 'append'，保留全部值但去重，最终生成data-track="search click form" - 绝对不要对
data-*做正则全局替换，因为它的语义完全由业务代码决定，工具无法推断
真正安全的做法是走 DOM 解析路径：new DOMParser().parseFromString(html, 'text/html')，再遍历所有元素的 className 属性处理，最后序列化回字符串。虽然慢一点，但不会漏判、误删。
data-* 属性重复要不要合并
要分情况。像 data-id、data-testid 这类唯一标识类属性，重复就是 bug，必须报错或过滤；但 data-track、data-module 这类标记型属性，重复通常无害，合并反而可能掩盖多模块叠加埋点的意图。
ponytail 白名单配置建议：
最常被忽略的是 data-* 和 JS 的耦合深度——删掉一个看似多余的 data-action="submit"，可能让表单提交逻辑彻底失效，而控制台连报错都不会有。
