html-webpack-plugin的minify配置需谨慎选择：collapsewhitespace可能破坏textcontent取值，removeemptyattributes会激活禁用按钮，removescripttypeattributes影响ie11的module脚本，removeredundantattributes误删自定义元素属性；压缩后必须验证首屏渲染、交互逻辑及lcp指标。
HTML 压缩不是“开个开关就完事”，它在生产打包中是一连串有依赖关系的取舍动作：压缩选项、构建插件顺序、资源注入方式，三者稍有错位，轻则白屏，重则功能失效。
html-webpack-plugin 的 minify 配置项怎么选才不翻车
Webpack 生产构建里最常踩坑的是 html-webpack-plugin 的 minify 选项。它默认不启用，一旦打开，几个关键参数直接影响 HTML 是否可运行：
-
collapseWhitespace: true会把<div> hello </div>变成<div>hello</div>；如果业务代码靠childNodes[0].textContent取值，就会拿空字符串 -
removeEmptyAttributes: true看似省体积，但会删掉<button disabled></button>中的disabled属性，按钮立刻变可点击 -
removeScriptTypeAttributes: true对现代浏览器安全，但若项目仍需兼容 IE11 且用了<script type="module"></script>，删掉后脚本直接不执行
HTML 内联 vs 外链：组件化项目里的体积真相
很多人以为“把 JS/CSS 全塞进 HTML 就是压缩”，其实恰恰相反。真正可控的体积优化，是从“全内联”转向“按需外链”：
- 内联资源无法利用浏览器缓存，每次 HTML 更新都会让 JS/CSS 重新下载
- 用
MiniCssExtractPlugin提取 CSS、SplitChunksPlugin拆分 vendor，再通过html-webpack-plugin注入外链地址，才能让公共资源复用 - 如果项目含 Web Component 或自定义元素，要禁用
removeRedundantAttributes，否则<my-input value=""></my-input>可能被误简化为<my-input></my-input>
压缩后还要做啥？别跳过验证环节
HTML 压缩不是构建最后一步，而是上线前必须验证的一环：
- 检查首屏是否白屏：压缩可能破坏
document.write或内联script执行顺序 - 验证交互逻辑：特别是依赖 DOM 结构深度或文本节点位置的功能（比如富文本编辑器光标定位）
- 对比压缩前后
Content-Length和 LCP 指标——有时删掉 2KB 却让 LCP 延迟 300ms，就得回退配置
最容易被忽略的点是：HTML 压缩效果高度依赖上游输出。如果 webpack 没开启 treeShaking，JS 里一堆未引用函数，压缩 HTML 再狠也救不了整体体积。先理清模块依赖，再动 minify 开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
