HTML无需编译，优化核心是减小传输体积、减少解析开销、避免阻塞渲染；需用html-minifier-terser构建压缩，并启用Nginx/Apache的gzip或brotli服务端压缩，同时合理使用preload、内联关键CSS、defer脚本。
HTML 文件本身不需要“编译”，但必须压缩文本内容
HTML5 是纯文本标记语言，没有“源代码发行”这个概念——它不是像 Go 或 Rust 那样需要编译成二进制的程序。你部署到服务器上的就是 index.html 这类文件，所以优化核心是：减小传输体积、减少解析开销、避免阻塞渲染。
关键不在于“打包工具是否用了”，而在于：HTTP 响应体是否最小化、是否启用了服务端压缩、是否剔除了无用字符。
用 html-minifier-terser 做构建时压缩（Node.js 环境）
这是目前最稳定、配置粒度最细的 HTML 压缩工具，支持保留注释、条件注释、自定义忽略块等，比很多 Webpack 插件更可控。
-
collapseWhitespace: true：合并连续空白符（含换行），但注意会破坏<pre>和white-space: pre元素的格式 -
removeComments: true：删 HTML 注释，生产环境应启用（调试用注释应在构建前清理） -
removeRedundantAttributes: true：删type="text"、value=""等默认值属性 -
useShortDoctype: true：把<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...>缩为<!DOCTYPE html> - 慎用
minifyCSS和minifyJS：它们只是内联<style>/<script>的简单压缩，不替代专门的 CSS/JS 工具
const minify = require('html-minifier-terser').minify;
const result = minify(htmlString, {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
useShortDoctype: true,
decodeEntities: true
});
Nginx / Apache 必须开启 gzip 或 brotli
光靠构建时压缩远远不够。如果服务端没启用响应压缩，浏览器收到的仍是未压缩的 HTML，所有构建压缩都白做。
立即学习“前端免费学习笔记（深入）”；
- Nginx 中确认有
gzip on;且gzip_types text/html application/javascript text/css;包含text/html - Brotli（
ngx_brotli）比 Gzip 压缩率高 15–20%，但需手动编译 Nginx 或用 Cloudflare 等 CDN 代理 - Apache 用
mod_deflate，检查AddOutputFilterByType DEFLATE text/html是否生效 - 验证方式：用 Chrome DevTools 的 Network 面板看
Content-Encoding响应头是否为gzip或br
别忽略 <link rel="preload"> 和资源加载顺序
HTML 文件虽小，但若它引用的 main.css 和 app.js 加载慢，首屏仍卡顿。压缩 HTML 本身对加载速度提升有限，真正瓶颈常在后续资源。
- 把关键 CSS 内联进
<head>，其余用<link rel="preload" as="style">提前触发下载 - JS 脚本加
defer（非模块）或type="module"（自动 defer），避免阻塞 HTML 解析 - 避免在
<head>里写<script src="..."></script>同步加载 - 检查 Lighthouse 报告中的 “Eliminate render-blocking resources”，它直接指出哪些 HTML 引用拖慢了首屏
真正影响用户感知的是“首个有意义的绘制”时间，不是 HTML 字节数少了多少 KB。压缩 HTML 只是基础项，容易被忽略的其实是服务端压缩开关是否打开、内联关键 CSS 是否合理、以及 JS 加载策略是否真 defer —— 这些地方一错，前面所有 minify 都白忙。
