前言
在前端开发过程中，我们经常需要对 HTML 进行压缩，以减少页面加载时间，提高用户访问体验。对于使用 FIS 工具链的开发者来说，它提供了一个非常方便的压缩 HTML 的插件：fis-optimizer-html-compress。本文将介绍如何使用该插件，以及如何在实际项目中应用它。
安装
在安装 fis-optimizer-html-compress 之前，你需要确保已经安装了 Node.js 和 FIS 工具链。这两个工具的安装步骤略过。
安装 fis-optimizer-html-compress 的命令如下：
npm install fis-optimizer-html-compress --save-dev
执行成功后，在你的项目根目录下的 node_modules 目录中会出现 fis-optimizer-html-compress 文件夹。
使用
安装成功之后，我们需要在 FIS 的配置文件中进行配置，以便于将 fis-optimizer-html-compress 与我们的项目结合使用。下面是一个简单的配置示例：
fis.match('*.html', {
optimizer: fis.plugin('html-compress')
});上述配置指定了对于以 .html 结尾的文件，使用 fis.plugin('html-compress') 进行压缩。这个插件的运行过程中需要依赖 html-minifier 模块，所以我们还需要在 package.json 中添加如下的依赖：
{
"devDependencies": {
"fis-optimizer-html-compress": "^1.0.0",
"html-minifier": "^5.2.1"
}
}配置完成后，我们使用 fis3 release 命令打包项目时便可以自动进行 HTML 压缩了。
选项
fis-optimizer-html-compress 还提供了一些选项，以便于我们进行一些个性化的配置。下面是可用选项的列表：
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| ignoreCustomComments | boolean | false |
是否忽略自定义 HTML 注释 |
| removeComments | boolean | true |
是否移除 HTML 中的注释 |
| removeEmptyAttributes | boolean | false |
是否移除空的 HTML 属性 |
| removeScriptTypeAttributes | boolean | false |
是否移除 script 标签中的 type 属性 |
| removeStyleLinkTypeAttributes | boolean | false |
是否移除样式和链接标签中的 type 属性 |
| minifyJS | boolean | object | false |
是否压缩 HTML 中的 Javascript 代码 |
| minifyCSS | boolean | object | false |
是否压缩 HTML 中的 CSS 代码 |
| sortAttributes | boolean | false |
是否将 HTML 标签的属性按照字典序排列 |
| sortClassName | boolean | false |
是否将 HTML 中的 class 属性按照字典序排列 |
| useShortDoctype | boolean | false |
是否使用 HTML5 短 doctype |
这些选项可以通过在配置中使用 options 属性进行设置，如下所示：
-- -------------------- ---- -------
------------------- -
---------- --------------------------- -
--------------------- -----
--------------- -----
---------------------- -----
--------------------------- -----
------------------------------ -----
--------- -----
---------- -----
--------------- -----
-------------- -----
---------------- ----
--
---结语
fis-optimizer-html-compress 插件的使用非常简单，但是它却能大大提高我们的项目性能，如果你还没尝试过，赶紧使用它吧！当然，只有在合适的场景下使用该插件才能发挥最大的效果，在实际项目中，我们需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fis-optimizer-html-compress