开发环境禁用html-minifier默认压缩，因会删除空格换行致调试困难；应按环境拆分配置，开发时关闭collapsewhitespace等选项，生产才启用完整压缩并排除模板语法干扰。
为什么 html-minifier 在开发环境开不了？
因为默认配置会把空格、换行全删掉，导致浏览器开发者工具里看不到可读的结构，调试时连元素都找不到父级——这不是 bug，是设计使然。
正确做法是按环境拆分配置：
- 开发构建用
html-minifier-terser+{ collapseWhitespace: false, removeComments: false, minifyCSS: false, minifyJS: false } - 生产构建才启用完整压缩，且必须加
ignoreCustomFragments排除 Vue/React 模板语法干扰 - Webpack 用户注意：
html-webpack-plugin的minify选项若为true，会覆盖你传入的配置对象，必须显式设为false再手动传入配置
如何让本地 HTML 和线上 HTML 的 DOM 结构完全一致？
关键不是“压缩不压缩”，而是“生成逻辑是否一致”。常见割裂源头是服务端模板（如 EJS、Nunjucks）在 dev server 中直出，而 build 后走静态文件，两套渲染路径导致 class 名、data 属性、甚至条件块位置都不一样。
统一方案只有一条路：所有 HTML 必须由构建流程一次性生成，禁止开发时绕过构建直接 serve 模板文件。
- 用
webpack-dev-server的static配置指向dist目录，而非源码目录 - 模板引擎改用预编译：比如
nunjucks-precompile把 .njk 编译成 JS 函数，再由html-webpack-plugin调用执行 - Vue/React 项目更简单：确保
index.html是纯静态入口，所有动态内容走 JS 渲染，避免在 HTML 里写这类分支
prettier 格式化 HTML 会破坏构建结果吗？
会。Prettier 默认把自闭合标签（如 <img>）转成 <img>，但某些 CMS 或 legacy 系统依赖 XML 风格闭合；更严重的是，它可能把 <script type="module"></script> 拆成多行，触发浏览器 parser error。
解决方案不是禁用 Prettier，而是约束作用域：
- 只对
src/*.html（手写的模板）启用 Prettier，禁用dist/*.html和public/index.html - 在
.prettierrc中明确设置{"htmlWhitespaceSensitivity": "strict"}，避免格式化后影响 CSS 选择器匹配 - CI 流程中加校验：
npm run build && git diff --no-index public/index.html dist/index.html，二者必须一致
上线前怎么快速验证 HTML 质量是否一致？
不能靠肉眼比对，要自动化抓取真实渲染结果。
最轻量的做法：用 Puppeteer 启动本地 dev server 和 prod server，分别截图并提取 document.body.innerHTML 做 diff。
- 重点比对：
class、id、data-属性值，以及script和link标签的src/href是否带 hash - 忽略项必须显式声明：时间戳、随机 ID、
data-v-xxx（Vue）、data-reactroot - CI 中失败时输出差异片段，而不是整页 HTML —— 否则日志刷屏，没人看
真正难的不是技术实现，是定义“一致”的边界：比如 SSR 渲染的初始 HTML 是否允许与 CSR hydrate 后的 DOM 存在微小差异？这个得和测试同学对齐，而不是交给构建工具决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
