简介
broccoli-cdnizer 是一款基于 broccoli 的插件，用于将你的前端资源路径转换为 CDN 路径，以便更快地加载资源，提高页面性能。
安装
在使用 broccoli-cdnizer 之前，需要先在项目中安装 broccoli。如果已经安装了 broccoli，可以直接通过以下命令安装 broccoli-cdnizer：
npm install broccoli-cdnizer --save-dev
使用
在项目的 Brocfile.js 文件中引入 broccoli-cdnizer，并配置插件参数。下面是一份示例代码：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ---- - -----------------
----- ------- - -
------ -
----------------
-------------------------------
--
--------------- --------------------
------------- -----
---------- -----
---- -
------------ -----------
-
--
----- ------- - ------------- ---------
-------------- - --------上面的代码中，tree 是需要转换的 Broccoli 树对象，options 是配置项。下面是 options 的可用参数及其含义：
files：需要转换的文件，支持 glob 语法。defaultCDNBase：CDN 基础路径，会自动将需要转换的文件路径拼接到该路径后面。relativeRoot：资源引用相对路径，用于计算资源相对路径。一般设置为'./'。enableSri：是否开启 SRI（Subresource Integrity）校验，默认为false。sri：SRI 参数，可传递一个对象，配置对应的属性。
完成以上配置后，运行 broccoli build 命令，会在项目根目录生成一个 dist 目录，里面包含已经转换好的文件。
示例
以 React 项目为例，我们可以将 index.html 中的静态资源路径转换为 CDN 路径，示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -----------
----- ---------------- --------------------
------- -----------------------------
-------
------
---- ----------------
------- --------------------------
-------
-------通过 broccoli-cdnizer 插件，将其转换为使用 CDN 路径加载静态资源：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -----------
----- ---------------- -------------------------------------
------- ----------------------------------------------
-------
------
---- ----------------
------- -------------------------------------------
-------
-------结语
broccoli-cdnizer 是一款十分实用的插件，使用它可以轻松将前端资源转换为 CDN 路径，提高页面性能。在实际项目中，我们可以根据需要自由地配置插件参数，以达到最佳的性能优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52a0