HTML压缩需兼顾结构安全与自动化工具，通过Webpack/Gulp集成html-minifier等插件剔除冗余字符，保留关键语义；辅以Gzip传输压缩，并区分开发与生产环境策略。
HTML基础本身不提供压缩能力，但掌握HTML结构和语义规范，是安全压缩的前提。压缩不是删代码，而是剔除浏览器不需要的冗余字符——比如换行、空格、注释，同时确保<!DOCTYPE>、标签嵌套、属性引号等关键结构不被破坏。真正实现高效压缩，得靠自动化工具介入构建流程。
用构建工具集成压缩（推荐主流方式）
现代项目基本都用Webpack或Gulp这类工具管理资源，HTML压缩可作为打包环节自动执行：
- Webpack项目安装
html-minimizer-webpack-plugin，在optimization.minimizer中配置，启用collapseWhitespace、removeComments、minifyCSS等选项； - Gulp项目引入
gulp-htmlmin，通过.pipe(htmlmin(options))处理src/*.html并输出到dist目录； - 压缩时保留必需结构：比如
<pre>、<textarea>内的空白不能盲目折叠，插件通常默认识别并跳过； - 配合
html-webpack-plugin使用时，模板注入和压缩可一并完成，避免手动处理生成的HTML文件。
命令行快速压缩（适合轻量或临时任务）
无需整套构建环境，也能快速压缩单个或批量HTML文件：
- 全局安装
html-minifier-cli：npm install -g html-minifier-cli； - 压缩单文件：
html-minifier --collapse-whitespace --remove-comments --input index.html --output index.min.html； - 批量处理目录：
html-minifier --input-dir src --output-dir dist --collapse-whitespace --remove-comments； - 可写入
package.json脚本，例如"minify:html": "html-minifier --input-dir dist --output-dir dist --remove-comments --collapse-whitespace"，用npm run minify:html一键执行。
服务器端启用Gzip（必须搭配的传输层优化）
前端工具压缩的是源文件体积，而Gzip是在HTTP响应时对整个HTML内容做二进制压缩，两者互补：
立即学习“前端免费学习笔记（深入）”；
- Nginx中开启Gzip只需几行配置：
gzip on;、gzip_types text/html application/javascript text/css;； - 它对已压缩的HTML文件仍能再压30%–70%，且浏览器自动解压，完全透明；
- 注意设置
gzip_min_length（如1KB），避免极小文件因压缩开销反而变慢； - 这项配置属于运维范畴，但前端需了解其作用——即使HTML没做预压缩，Gzip也能大幅减少传输字节。
开发与生产环境要区分对待
压缩不是越狠越好，需兼顾可维护性与稳定性：
- 开发阶段保留格式化HTML，方便审查元素、调试逻辑、协作阅读；
- 生产构建才启用完整压缩，包括移除注释、精简属性（如
checked="checked"→checked）、合并内联脚本样式； - 上线前务必验证：压缩后页面是否正常渲染？表单提交、JS交互、SEO元信息是否完整？
- 避免“过度压缩”陷阱，例如错误移除
ng-app或v-cloak等框架特定属性，或把<script>内联代码压缩出语法错误。
