如何快速安装和配置html-minifier：5分钟上手教程

2026-02-06 04:15:23作者：平淮齐Percy

想要优化网站性能？html-minifier 是你的终极解决方案！这个强大的 HTML 压缩工具能够显著减小文件大小，提升页面加载速度。💪

什么是html-minifier？

html-minifier 是一个基于 JavaScript 的高度可配置、经过充分测试的 HTML 压缩器。它通过移除不必要的空格、注释和冗余属性来优化你的HTML代码，让你的网站飞起来！🚀

快速安装指南

方法一：全局安装（推荐新手）

npm install html-minifier -g

方法二：项目本地安装

npm install html-minifier

方法三：从源码安装

git clone https://gitcode.com/gh_mirrors/ht/html-minifier
cd html-minifier
npm link .

基础使用教程

命令行快速压缩

html-minifier --collapse-whitespace --remove-comments input.html -o output.html

配置文件方式

创建配置文件 minify.conf.json：

{
  "collapseWhitespace": true,
  "removeComments": true,
  "minifyCSS": true,
  "minifyJS": true

然后运行：

html-minifier -c minify.conf.json input.html -o output.html

核心配置选项

🎯 必选配置项

collapseWhitespace：压缩空白字符
removeComments：删除HTML注释
removeRedundantAttributes：移除冗余属性

⚡ 高级配置项

minifyCSS：压缩内联CSS
minifyJS：压缩内联JavaScript
removeEmptyAttributes：移除空属性

批量处理多个文件

处理整个目录

html-minifier --input-dir ./src --output-dir ./dist --file-ext html

实战示例

压缩前：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <style>
        body { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <!-- 这是注释 -->
    <div class="container">
        <p>Hello World!</p>
    </div>
</body>
</html>

压缩后：

<!DOCTYPE html><html><head><title>示例页面</title><style>body{margin:0;padding:0}</style></head><body><div class="container"><p>Hello World!</p></div></body></html>

性能优化效果

使用html-minifier后，你的HTML文件大小通常可以减少20-30%！这对于提升网站加载速度至关重要。📈

常见问题解答

❓ 压缩后代码难以阅读怎么办？

使用开发环境和生产环境分离的策略，只在生产环境使用压缩后的代码。

❓ 如何处理特殊标记？

使用  来保护不想被压缩的代码块。

进阶技巧

自定义正则表达式

在配置文件中使用正则表达式来匹配特定的自定义属性：

{
  "customAttrAssign": ["\\?="],
  "ignoreCustomFragments": ["<\\?[\\s\\S]*?\\?>"]

总结

通过这个5分钟教程，你已经掌握了html-minifier的基本使用方法。记住，合理配置压缩选项，在保证功能正常的前提下最大化压缩效果。现在就开始优化你的网站吧！🎉

小贴士：建议在持续集成流程中集成html-minifier，确保每次部署都使用最优化的代码。

html-minifier

Javascript-based HTML compressor/minifier (with Node.js support)

项目地址：https://gitcode.com/gh_mirrors/ht/html-minifier

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解