html5-clear最稳妥批量删无用属性：默认保留id/class，支持按规则剔除align等HTML4遗留属性；删data-前须三步验证JS调用链；Hutool removeHtmlAttr可精准移除指定属性；tidy-html5的-clean不删除属性本身。
用 html5-clear 批量删掉无用属性最稳妥
直接删 class、id、data- 属性风险很高——JS 可能靠它们查元素，CSS 可能靠它们写样式。所以不能只看“有没有用”，得看“运行时是否被读取”。html5-clear 默认不删 id 和 class，但支持按规则精准剔除废弃属性，比如 align、bgcolor、border 这类 HTML4 遗留属性。
安装后执行命令即可清理指定文件：
npx html5-clear -f index.html -o cleaned.html --ruleset basic
--ruleset basic 会移除过时属性和空属性（如 class=""），但保留所有 data- 和自定义属性；若想更激进，可加 --ruleset strict，它还会过滤未在 CSS/JS 中出现的 id 和 class（需配合项目上下文验证）。
删 data- 属性前必须查 JS 调用链
很多 data- 属性看着像占位符，其实被 JS 当作开关或配置项：比如 <div data-module="cart"> 可能被 <code>document.querySelector('[data-module="cart"]') 读取，硬删会导致模块加载失败。
立即学习“前端免费学习笔记（深入）”；
安全做法是三步交叉验证：
- 在 VS Code 全局搜索该
data-属性名，确认是否出现在querySelector、dataset或事件监听器中 - 打开 Chrome DevTools → Elements 面板，右键对应节点 → Break on → Attribute modifications，刷新页面，看是否触发断点
- 检查构建产物（如打包后的
main.js）里是否还残留相关引用，避免开发时没调用、上线后才触发
用 Hutool 的 removeHtmlAttr 精准剔除单个属性
如果你只打算干掉某几个特定属性（比如统一去掉所有 style，但保留 class 和 id），Hutool 的 removeHtmlAttr 比正则更可靠——它基于 DOM 解析，不会误伤标签内文本或注释里的 style= 字样。
Java 示例：
String clean = HtmlUtil.removeHtmlAttr(html, "style", "onclick", "onerror");
注意：removeHtmlAttr 不处理嵌套结构中的属性（比如 <svg><g style="..."></g></svg>），只清理顶层标签；如果要深度清理，得配合 filter() + 白名单配置，否则可能漏掉内联 SVG 或 MathML 中的属性。
别信 tidy-html5 的 -clean 参数
tidy-html5 命令带 -clean 标志看似能“清理属性”，但它实际只删 class、id、style 等属性的冗余值（比如把 class="a b a" 缩成 class="a b"），**完全不删除属性本身**。很多人误以为它能清空 style，结果发现输出里还是满屏 style="display:none;"。
真正想剥离样式，得用：
-
sanitize-html+ 白名单关闭style属性（但会连<style></style>标签一起干掉） -
ponytail配置attributes: { '*': [] }清空所有属性，再手动放行需要的 - 或者干脆用 CSS 分离策略：把内联
style提到外部文件，再用 Coverage 工具确认是否真没人用
属性清理最难的不是工具选型，而是判断“谁还在读它”——DOM 存在性、JS 调用链、构建产物残留，三者缺一不可。漏掉任意一环，上线后就容易冒出 Cannot read property 'dataset' of null 这类错误。
