随着前端项目越来越复杂，依赖的第三方库也越来越多，经常会有这样的场景：相同的库在不同的页面都被引用，导致重复加载，浪费带宽和加载时间。该怎么办呢？CDN 选择是个不错的方案，webpack-cdnizer 就是一个可以帮助我们在 webpack 项目中快速实现 CDN 全量引入的 npm 包。
安装
使用 npm 安装 webpack-cdnizer：
npm install webpack-cdnizer --save-dev
使用
基本使用
webpack-cdnizer 的使用非常简单，只需要在 webpack 配置文件中添加一个插件即可：
var WebpackCdnizer = require('webpack-cdnizer');
module.exports = {
// ...省略其它配置
plugins: [
new WebpackCdnizer()
]
};这样，webpack-cdnizer 就会自动将项目中被依赖的第三方库替换为 CDN 引入，以 jquery 库为例，替换规则如下：
import $ from 'jquery';会被替换为<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>const $ = window.jQuery = require('jquery');会被替换为<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>和window.jQuery = require('jquery');
可以看到，webpack-cdnizer 会根据不同的模块规范处理，保证项目中所有被依赖的库都可以被全量引入。
配置
上面提到的是 webpack-cdnizer 的默认配置，实际上我们可以通过传入选项对象来进行个性化定制。下面是所有可用的选项：
-- -------------------- ---- -------
--- ----------------
----------- ---- -- --- -------- ------- --- ----------
--------- - -- ------
-
----- ---------
---- ---- -- ---------------- ------- -------
----- -------------------- -- --
--
-
----- --------
---- --------
----- -----------------------------
--
-
----- ------------
---- -----------
----- ---------------------------------
-
--
----- ----- -- ----------------- ----
-------- ----- -- --------
--其中，packages 选项提供的是一个常用的包集合，在实际使用时可以按需自行添加。比如，我需要引用 antd 库，可以将其加入到 packages 数组中：
-- -------------------- ---- -------
--- ----------------
--------- -
-- --------
-
----- ------- -- --
---- ------- -- ------ -----------
----- ------------------ -- -- --- ----
-
-
--示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - ---------------------------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
--
-------- -
--- ----------------
--------- -
-
----- --------
---- --------
----- -----------------------------
--
-
----- ------------
---- -----------
----- ---------------------------------
-
-
---
--- ----------------------
-------------- -
--------- ------------------------------------
-
--
-
--结语
webpack-cdnizer 可以帮助我们在前端项目中优化第三方库的引用方式，通过对比可以发现，引入 CDN 方式不仅可以提高页面加载速度，还可以降低服务器的请求压力，不失为一种非常好的优化方式。如果你的项目引用了大量的第三方库，不妨试一试 webpack-cdnizer，相信会为你的项目带来惊喜。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005514b81e8991b448ce5be