vite-plugin-html通过minify:true启用HTML压缩，移除空格、注释和冗余属性，由minifyHtml.ts实现，仅在build阶段生效。
脚手架本身不直接做HTML编译期优化，它只提供可配置的构建链路；真正起作用的是你接入的插件和规则——比如 html-minifier、eslint-plugin-html、remark-lint，它们才是把“写得松散”的HTML变成“结构紧实、语义准确、体积精简”的关键。
Webpack/Vite 脚手架里怎么接入 HTML 压缩
压缩不是默认开的，尤其 Vite 默认连 HTML 都不走构建流程（开发时直接 serve 原文件）。必须显式加插件或启用 build 模式下的 minify 选项。
- Webpack：装
html-webpack-plugin+html-minifier-terser，在 plugin 配置里传minify对象，设removeComments: true、collapseWhitespace: true、removeRedundantAttributes: true - Vite：开
build.minify: 'terser'不管用——它只压 JS。要压 HTML，得用vite-plugin-html或vite-plugin-html-config，在transformHtml钩子里调html-minifier-terser处理字符串 - 注意：压缩会删掉空格和换行，导致调试时 source map 对不上；建议只在
build阶段启用，开发时关掉
为什么 ESLint 不能直接校验 HTML 结构错误
ESLint 是为 JS 设计的解析器，原生看不懂 <main></main> 或 <section></section> 的嵌套合法性。它需要靠 eslint-plugin-html 把 HTML 文件里的 <script></script> 块抽出来喂给 ESLint，再靠 eslint-plugin-jsx-a11y 补充标签语义检查。
- 真正检查
<main></main>是否重复、<h2></h2>是否跳级，得用remark-lint+remark-lint-heading-increment这类基于 AST 的工具 - 如果你用的是 Markdown → HTML 流程（如 VitePress），校验必须放在转换前，否则 HTML 已生成，错误就固化了
- 常见漏报点：
aria-*属性拼写错误、role值不在 WAI-ARIA 规范列表里——这些只有eslint-plugin-jsx-a11y或axe-core扫描能抓到
脚手架模板里预置语义化结构反而容易出错
很多脚手架（比如 create-vite 的 vanilla 模板）直接给你塞好 <header><nav><main><footer></footer></main></nav></header>，看起来很规范，但实际项目里往往一上来就删掉 <nav></nav> 或把 <main></main> 包进某个组件里——这就违反了 <main></main> 只能出现一次且不可嵌套的硬性规则。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是：脚手架只提供基础骨架（
），把语义结构决策权留给开发者，再配html-validate在 CI 阶段强制拦截 - VS Code 插件
HTMLHint可以实时标红<main></main>嵌套、<section></section>缺标题等问题，但它的规则文件.htmlhintrc必须手动启用"requireLangAttribute": true等项，否则形同虚设 - 动态渲染场景下（React/Vue），DOM 最终结构由 JS 控制，静态检查工具会失效；这时得靠运行时断言，比如在
useEffect里查document.querySelector('main')数量
最常被忽略的一点：脚手架生成的 HTML 校验规则，往往只覆盖 index.html，而忽略通过 import.meta.glob 或 require.context 动态引入的 HTML 片段、服务端渲染模板、甚至 CMS 导出的 HTML 内容块——这些才是语义断裂和嵌套失控的重灾区。
