前言
在前端开发过程中，优化 HTML 代码是必不可少的一步。而 html-minifier-terser 是一款压缩和格式化 HTML 代码的工具，帮助我们缩减代码并提高网站性能。在本文里，我们将学习如何使用该 npm 包。
安装
在开始使用 html-minifier-terser 之前，你需要先安装它。你可以使用 npm 包管理器来安装它，执行以下命令即可：
npm install html-minifier-terser --save-dev
使用
安装完成后，你就可以使用 html-minifier-terser 来压缩和格式化 HTML 代码了。在下面的示例中，我们将使用 html-minifier-terser 来压缩以下 HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------ -------- ------ --------------- ------- ------ --------- -------- ------ ------------ -------- -- -- ------- -- --- -- --- ------------------------ ------- -------
我们现在将压缩这个 HTML 代码，示例代码如下：
-- -------------------- ---- -------
----- ------ - ---------------------------------------
----- ---- - ---------- -----
------
------
------ ----------------
------------ -------- ------ ---------------
-------
------
--------- -------- ------ ------------
-------- -- -- ------- -- --- -- --- ------------------------
-------
---------
----- ------ - ------------ -
------------------- -----
--------------- ----
---
--------------------在上述代码中，我们首先导入了 html-minifier-terser 函数，然后指定需要压缩的 HTML 代码。接下来，我们将传递下面的参数来配置压缩选项：
collapseWhitespace: boolean，多个空格是否合并为一个。removeComments: boolean，是否删除 HTML 代码中的注释。
最后，我们将调用 minify 函数，并将压缩后的结果输出到控制台。
以上示例代码的结果如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML Minifier Terser Example</title></head><body><h1>HTML Minifier Terser Example</h1><p>This is an example of how to use html-minifier-terser</p></body></html>
学习
html-minifier-terser 不仅仅是一个压缩代码的工具，它还包含了一些高级的选项，能够帮助我们进一步优化代码。下面是一些常见的 html-minifier-terser 选项：
minifyCSS: boolean，是否压缩 HTML 中的 CSS 代码。minifyJS: boolean，是否压缩 HTML 中的 JavaScript 代码。sortAttributes: boolean，HTML 标记属性的排序方式。removeAttributeQuotes: boolean，是否移除属性中的双引号。
除此之外，html-minifier-terser 支持更多的选项，你可以在官方文档中查看更详细的信息。
指导意义
html-minifier-terser 是一个非常简单但也非常有用的工具，它可以帮助我们优化 HTML 代码并提高网站性能。由于它受到广泛的支持和开发者的喜爱，因此我们可以轻松地集成它到我们的项目中。
无论是在现有项目中使用，还是在新项目开发中使用，html-minifier-terser 都是必不可少的工具。通过学习本文，相信你已经了解了如何使用该 npm 包，并且理解了它在前端开发中的重要性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb994b5cbfe1ea06118a4