在前端开发中，文件压缩是很常见的优化性能的方法。fis3-optimizer-minifier 是一个基于 fis3 的插件，它可以帮助我们进行文件的压缩操作。本文将会详细介绍 npm 包 fis3-optimizer-minifier 的使用教程。
安装
在使用之前，我们需要先安装 fis3-optimizer-minifier，可以通过 npm 进行安装：
npm install fis3-optimizer-minifier --save-dev
使用
在安装完 fis3-optimizer-minifier 之后，我们就可以在 fis3 的配置文件 fis-conf.js 中进行相关的配置。以下是配置示例：
fis.match('*.js', {
optimizer: fis.plugin('minifier', {
//minify: function (content, file, options) {},
mergeJs: true,
})
});其中，fis.plugin('minifier'，{...}) 就是 fis3-optimizer-minifier 的配置项。上面的代码表示对所有的 .js 文件进行压缩操作。
配置项
fis3-optimizer-minifier 提供了多个配置项以进行更多的自定义设置，下面是配置项列表：
jsMinifier
类型：Object
默认值：
-- -------------------- ---- -------
-
------- -
------- ----------- ---------- --------- ---------
--
--------- -
------------- -----
-------------- -----
---------- -----
------------ -
------ -----
-
-
-说明：指定对于 JS 的压缩方式。其中，mangle 是用来混淆 JS 代码的。
cssMinifier
类型：Object
默认值：
-- -------------------- ---- -------
-
-------------- ----
------ -
-- -
---------------- -
--
-- -
----------- -----
-------------- ---
-
-
-说明：指定对于 CSS 的压缩方式。其中，compatibility 表示过滤哪些浏览器不支持的属性。
htmlMinifier
类型：Object
默认值：
-- -------------------- ---- -------
-
------------------- -----
--------------- -----
---------------------- -----
---------------------- -----
--------- -----
---------- -----
---------------------- -
---------------
-----------------
----------------------
--------------------------------------------------
-------------------------------------
-
-说明：指定对于 HTML 的压缩方式。其中，minifyJS 和 minifyCSS 分别表示是否对 HTML 中的 JS 和 CSS 进行压缩。
示例
压缩 JS 文件
-- -------------------- ---- -------
----------------- -
---------- ---------------------- -
----------- -
--------- -
------------- -----
-------------- -----
---------- -----
------------ -
------ -----
-
-
-
--
---压缩 CSS 和 HTML 文件
-- -------------------- ---- -------
------------------ -
---------- ---------------------- -
------------ -
-------------- ---
-
--
---
------------------- -
---------- ---------------------- -
------------- -
------------------- -----
--------------- -----
---------------------- -----
---------------------- -----
--------- -----
---------- ----
-
--
---总结
fis3-optimizer-minifier 提供了多个配置项以便于我们对文件进行更多的自定义设置，可以帮助我们优化前端性能。希望本文能够对大家学习和使用 npm 包 fis3-optimizer-minifier 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66485