removeredundantattributes 选项基于 html5 规范语义判断自动删除浏览器无需解析的冗余属性（如 中的 type），保留 class="" 等有逻辑依赖的空属性，安全可靠；启用方式为 minify: { removeredundantattributes: true }，建议显式关闭 removeemptyattributes 避免误删。
html-webpack-plugin 的 removeRedundantAttributes 怎么用
这个选项能自动删掉 HTML5 中语义冗余的属性，比如 type="text"（<input> 默认就是 text）、type="text/css"（<link rel="stylesheet"> 的 type 已废弃）、charset="utf-8"（<meta> 在 HTML5 中可省略）等。它不是靠正则硬删，而是基于浏览器解析规则做语义判断，比手动清理更安全。
启用方式很简单：
new HtmlWebpackPlugin({<br> minify: {<br> removeRedundantAttributes: true<br> }<br>})
- 它不会删掉有 JS 逻辑依赖的属性，比如
class=""或data-id=""—— 这类空值属性默认保留，除非你额外设removeEmptyAttributes: true（不推荐） - 对自定义元素（如 Web Components）或
<template></template>内容默认跳过，避免误删服务端模板占位符 - 若项目用了
<meta name="viewport">等必需属性，它也不会动，只处理明确被规范标记为“可省略”的项
为什么 removeRedundantAttributes 比手动删更可靠
手动删容易漏、易出错：比如把 <input type="email"> 里的 type 也删了，就破坏了表单验证；或者误删 <script type="module"></script> 的 type，导致模块加载失败。而 removeRedundantAttributes 内置了 HTML5 规范的白名单，只删那些「浏览器根本不用看」的属性。
典型安全删除项包括：
-
<script type="text/javascript"></script>→ 删掉type属性（HTML5 默认就是 JS） -
<link rel="stylesheet" type="text/css">→ 删掉type -
<meta charset="utf-8">→ 删掉charset（<meta>标签本身不能省，但属性可去） -
<input type="text" value="">→ 保留value，因为它是可变的，不属于冗余
容易踩的坑：removeRedundantAttributes 和 removeEmptyAttributes 别混用
前者删的是“浏览器不需要的默认值”，后者删的是“值为空字符串的属性”。这两个开关逻辑不同，但很多人会一起开，结果导致 class=""、data-test="" 被清掉 —— 这些空属性常被测试脚本或 CSS 选择器依赖，删了就断功能。
建议配置里显式关掉后者：
minify: {<br> removeRedundantAttributes: true,<br> removeEmptyAttributes: false // 显式关闭，避免意外丢失空属性<br>}
- 如果你真需要删空属性，得先 grep 全局确认没有 JS 或 CSS 依赖
[class=""]这类选择器 - 某些 UI 库（如早期 Bootstrap）会用
data-toggle=""控制行为，删了就失效 - Vue / React 渲染时生成的空属性（如
v-bind:class=""编译后可能留下class=""）也属于高危项
压缩后还得验证 DOM 行为是否一致
删属性本身不报错，但可能影响运行时逻辑。比如 <img src="x.jpg" alt=""> 被删掉 alt 后变成 <img src="x.jpg">，屏幕阅读器会读成“图片”，而非“空替代文本”——可访问性降级。
上线前必须检查：
- 表单提交、校验是否正常（尤其带
type、required的字段） - JS 是否还通过
el.getAttribute('data-id')正确取值（空属性被删后返回null而非""） - 自动化测试里所有基于属性的选择器是否仍匹配
最保险的做法是：在 CI 流程中跑一次压缩后的 HTML，再用 Puppeteer 加载并执行关键交互路径，而不是只看体积数字下降了多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
