npm 包 webpack-cdnizer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 webpack-cdnizer 使用教程

随着前端项目越来越复杂，依赖的第三方库也越来越多，经常会有这样的场景：相同的库在不同的页面都被引用，导致重复加载，浪费带宽和加载时间。该怎么办呢？CDN 选择是个不错的方案，webpack-cdnizer 就是一个可以帮助我们在 webpack 项目中快速实现 CDN 全量引入的 npm 包。

安装

使用 npm 安装 webpack-cdnizer：

--- ------- --------------- ----------

使用

基本使用

webpack-cdnizer 的使用非常简单，只需要在 webpack 配置文件中添加一个插件即可：

--- -------------- - ---------------------------

-------------- - -
  -- ---------
  -------- -
    --- ----------------
  -
--

这样，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