前言
在前端开发中，压缩 SVG 文件是一个非常重要的工作。压缩后的 SVG 文件可以显著的降低文件大小，提高页面加载速度。而 Broccoli-SVGO 就是一个非常优秀的 SVG 压缩工具，它可以根据配置规则压缩 SVG 文件。
本文将介绍如何使用 Broccoli-SVGO 进行 SVG 压缩。
什么是 Broccoli-SVGO？
Broccoli-SVGO 是基于 NodeJS 开发的 SVG 压缩工具。它使用了 SVGO 库来完成 SVG 文件的压缩，同时允许用户根据自己的需要对 SVG 文件进行定制化压缩。
如何安装 Broccoli-SVGO？
首先，你需要将 NodeJS 安装到你的本地环境。安装 NodeJS 的过程相对简单，这里不再赘述。如果你还未安装 NodeJS，你可以在 NodeJS 官网 下载并安装。
安装 Broccoli-SVGO 非常简单，只需要在命令行中输入以下命令：
npm install --save-dev broccoli-svgo
然后，等待命令行提示安装完成即可。
如何配置 Broccoli-SVGO？
完成了安装后，我们需要对 Broccoli-SVGO 进行配置。
在项目根目录下新建名为 Brocfile.js 的文件，然后在文件中导入 Broccoli-SVGO：
const BroccoliSVGO = require("broccoli-svgo");接下来我们需要定义一个 Broccoli-SVGO 实例，具体实现代码如下：
-- -------------------- ---- -------
----- ------------ - -------------------------
-------------- - -------- ---------- -
----- --------- - -------------------
----- ---------- - --- ----------------------- -
-------- -
-
----- ---------------
------- ---
--
-
----- ----------------------
------- ---
--
-
----- -----------------
------- ---
--
-
----- -------------------
------- ---
--
-
----- ------------------------
------- ---
--
-
----- -------------
------- ---
--
-
----- -------------------
------- ---
--
--
---
------ -----------
--在这段代码中，我们使用了 new BroccoliSVGO(inputNode, options) 方法来创建了一个新的 Broccoli-SVGO 节点。其中：
inputNode代表将要处理的文件目录；options.plugins是一个数组，用于配置需要使用的 SVGO 插件，插件顺序会影响最终的压缩效果。
这里我们选用了一些常用的插件，例如：
cleanupAttrs: 清理无用的属性；removeComments: 删除注释；removeEmptyAttrs: 删除空属性。
更多插件使用方法可参考 SVGO 官方文档。
如何运行 Broccoli-SVGO？
完成配置后，我们需要在命令行中运行 Broccoli-SVGO。
broccoli build dist/
运行该命令会将 dist 目录下的 SVG 文件进行压缩，并输出到 dist-assets 目录中。
结语
在这篇文章中，我们介绍了如何使用 Broccoli-SVGO 进行 SVG 压缩，并详细介绍了配置方法和运行方式。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5151