HTML压缩后体积未变的主因是内联JS/CSS未压缩，而HTML压缩器默认不处理它们；需先用terser、clean-css等工具单独压缩内联资源，再用html-minifier-terser配合--minify-js true和--minify-css true参数处理，同时务必启用服务端gzip。
HTML 压缩为什么没让 index.html 变小？
常见情况是：你用了在线 HTML 压缩工具或插件，但生成的文件体积几乎没变。根本原因通常是 <script></script> 和 标签内嵌了未压缩的 JS/CSS —— 这些内容占了大头，而 HTML 压缩器默认只处理标签结构、空格和换行，对内联代码“视而不见”。
实操建议：
- 先用
du -sh index.html（Linux/macOS）或属性查看（Windows）确认真实体积，别只看编辑器右下角显示 - 用浏览器开发者工具 → Network 面板刷新页面，看
index.html的 “Size”（传输大小）和 “Content”（解压后大小），区分是否启用了服务端 gzip - 检查是否有大段内联
<script></script>，比如未构建的 Vue/React 模板、未压缩的统计代码、直接贴进去的node_modules脚本
怎么安全地压缩内联 JS 和 CSS？
不能直接用 HTML 压缩器“一锅炖”，必须分层处理：先压缩内联资源，再压缩 HTML 结构。否则可能破坏 JS 字符串、正则或 CSS 自定义属性。
实操建议：
- 把大段内联
<script></script>移到外部文件（如main.min.js），用esbuild --minify或terser压缩，再通过<script src="main.min.js"></script>引入 - 内联
超过 20 行就该抽离；若必须保留，用clean-css-cli单独压缩：cleancss style.css -o style.min.css - 如果真要保留在 HTML 里（如关键 CSS），先压缩好内容，再手动粘贴进
，不要依赖 HTML 工具二次处理
html-minifier-terser 的关键参数避坑
这是目前最可靠的 Node.js HTML 压缩工具，但默认配置会留空格、不删注释、保留引号，体积节省有限。
实操建议（package.json 中的脚本示例）：
"scripts": {
"build:html": "html-minifier-terser --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true --preserve-line-breaks false -o dist/index.html src/index.html"
}
重点参数说明：
-
--remove-comments：删掉，上线前注释本就不该存在 -
--minify-css true和--minify-js true：启用内联样式/脚本压缩（注意：仅限简单语法，复杂 ES6+ 或带模板字符串的 JS 可能出错） -
--collapse-whitespace：把多个空格/换行压成单个空格，比--remove-tag-whitespace更激进 - 慎用
--remove-optional-tags：会删
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
