HTML压缩需五步：一、删空白与注释；二、压缩内联CSS/JS；三、移无用属性与标签；四、用html-minifier-terser批量处理；五、启用Gzip/Brotli服务端压缩。
如果您希望减少HTML文件的体积以提升页面加载速度，可能需要对HTML代码进行压缩和精简。以下是实现HTML代码压缩打包的具体操作步骤：
一、移除空白字符与注释
HTML中的空格、制表符、换行符以及HTML注释在浏览器渲染时并不影响最终显示效果，但会增加文件体积。移除这些冗余内容可显著减小HTML文件大小。
1、打开待处理的HTML文件，使用文本编辑器或支持正则替换的工具（如VS Code、Sublime Text）。
2、执行正则表达式查找：，替换为空字符串，删除全部HTML注释。
立即学习“前端免费学习笔记（深入）”；
3、执行正则表达式查找：\s+，替换为单个空格，合并连续空白符。
4、再执行查找：>\s+
5、手动检查并删除文件开头、结尾及标签内不必要的空格与换行。
二、压缩内联CSS与JavaScript
嵌入在HTML中的
1、复制
2、将压缩后的CSS代码替换原
3、复制
4、将压缩后的JS代码替换原
三、移除无用属性与冗余标签
部分HTML标签携带浏览器默认行为的属性（如type="text/javascript"、language、xml:lang等），或已废弃的标签（如、
1、删除
2、删除中type="text/css"属性。
3、检查并移除所有中已被现代标准替代的兼容性声明（如Content-Type的重复声明）。
4、将html lang="zh-CN">以外的xml:lang、xmlns等命名空间属性全部删除。
5、将中未修改默认行为的value=""、autocomplete="off"等冗余属性剔除。
四、使用HTML Minifier命令行工具批量处理
Node.js环境下的html-minifier-terser是目前维护活跃、配置灵活的开源压缩工具，支持自动化、可复现的HTML精简流程，适用于多文件项目。
1、全局安装工具：运行命令npm install -g html-minifier-terser。
2、进入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 index.html -o index.min.html。
3、确认输出文件index.min.html生成成功，并用浏览器验证渲染一致性。
4、如需处理整个目录，可配合shell脚本或glob模式（如*.html）批量执行。
五、启用Gzip或Brotli服务端压缩
HTML文本本身具备极高压缩率，Web服务器启用Gzip或Brotli压缩后，可将传输体积降至原始大小的20%–30%，属于无需修改源码即可生效的关键优化环节。
1、确认服务器支持Gzip：在Nginx配置中添加gzip on;及配套指令（如gzip_types text/html application/javascript text/css）。
2、若使用Apache，启用mod_deflate模块并在.htaccess中加入AddOutputFilterByType DEFLATE text/html text/css application/javascript。
3、对于现代服务器（如Cloudflare、Vercel、Netlify），默认已启用Brotli；可通过响应头content-encoding: br确认是否生效。
4、使用curl命令验证压缩效果：curl -H "Accept-Encoding: br" -I https://yoursite.com/index.html，检查返回头中是否存在br编码标识。
