什么是 cdnizer?
cdnizer 是一个 npm 包，能够帮助我们将需要从 CDN 加载的资源路径转化为 CDN 资源地址。通过使用 cdnizer，我们可以减轻我们的服务器负担，增加页面加载速度。
为什么要使用 cdnizer?
使用 cdnizer，可以将本地引用的静态资源链接，转化为 CDN 资源的链接，这样可以使得页面加载效率更高。
同时，使用 CDN 资源，也是一种常用的静态资源优化技术。因为 CDN 资源不仅能够提高访问速度，还可以减轻服务器的负担。
cdnizer 的安装
因为 cdnizer 是一个 npm 包，所以为了使用 cdnizer，需要先安装它。可以通过以下命令来安装 cdnizer：
--- ------- ------- ------
cdnizer 的使用
在安装好 cdnizer 后，我们就可以使用它来转化本地链接路径了。
1. 在 Node.js 中使用 cdnizer
在 Node.js 中使用 cdnizer（示例代码）：
----- ------- - -------------------
----- ------- - -
--------------- ---------------------
------------- -----------
------ -
-
----- ----------
---- -------------------------------
--
-
----- -------
---- -----------------------------------------
-
-
-
----- ------- - -------- ---------------- ---------------- ---------------------
---------------------------- ----------在上述示例代码中，通过 require 引入了 cdnizer 模块。然后，定义了一个 options 对象，用来指定 cdnizer 的转化规则。这里，cdnizer 的默认基础 CDN 地址是 '//cdn.example.com/'，相对路径是从 '/public/' 开始，然后针对不同的文件类型指定了不同的 CDN 地址。
接着，定义了需要进行 CDN 转化的文件的内容（即 content）。最后，通过 console.log 打印出了转化后的结果。
2. 在浏览器中使用 cdnizer
在浏览器中使用 cdnizer 的步骤如下：
- 首先，在页面中引入 cdnizer：
------- -----------------------------------------
- 接着，在页面中定义需要进行 CDN 转化的文件的内容：
--------
--- ------- - -------- ---------------- ---------------- ---------------------
--- ------- - -
--------------- ---------------------
------------- -----------
------ -
-
----- ----------
---- -------------------------------
--
-
----- -------
---- -----------------------------------------
-
-
--
--- ------ - ---------------- ---------
---------- 最后，在页面中使用转化后的内容：
------- ------- ------ -------------
在上述示例代码中，首先，在页面中引入了 cdnizer。然后，在页面中定义了需要进行 CDN 转化的文件的内容，和相应的 options 对象。接着，调用 cdnizer 方法，将 content 和 options 作为参数传入，并将返回结果保存在 result 变量中。
最后，在页面中使用转化后的内容，也就是将 result 当作资源引用的地址。
小结
使用 cdnizer 能够将本地的静态资源链接转化为 CDN 资源地址，从而减轻服务器的负担，提高页面加载速度。在 Node.js 中使用 cdnizer，需要定义一个 options 对象，并将这个对象和需要转化的内容传入 cdnizer 方法中。在浏览器中使用 cdnizer，需要在页面中引入 cdnizer，并将需要转化的内容和 options 对象作为参数传入 cdnizer 方法中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5ef2c8bb8c4ce90ee4ca3b69