如何快速安装和配置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

登录后查看全文