在前端开发中，使用第三方库和框架是非常普遍的。通常，我们会通过 npm 的方式安装这些库和框架，然后在代码中引用。但是，当我们需要使用的第三方库和框架比较大时，这种方式可能会导致我们的应用程序加载时间变得很慢。为了解决这个问题，我们可以将这些第三方库和框架存储在 CDN 上，并从 CDN 加载这些资源。
@likun7981/webpack-cdn-plugin 就是一个可以帮助我们自动将第三方库和框架上传到 CDN 并从 CDN 加载这些资源的 webpack 插件。在本篇文章中，我们将介绍如何使用这个插件。
安装
使用 npm 来安装这个插件：
npm install --save-dev @likun7981/webpack-cdn-plugin
使用
使用这个插件非常简单。首先，我们需要配置我们要上传到 CDN 上的第三方库和框架的列表。我们可以在 webpack 配置文件中添加一个名为 cdn 的配置项，该配置项应该是一个数组，每个元素代表一个要上传到 CDN 上的第三方库或框架。
例如：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- - ---------------- - - -----------------------------------------
----- --- - -
-
----- --------
---- --------
----- -----------------------------
--
-
----- ------------
---- -----------
----- ---------------------------------
-
--
-------------- - -
-- ---
-------- -
--- ------------------
-------- ----
----------- --
--
-
--在上面的例子中，我们定义了要上传到 CDN 上的两个第三方库：react 和 react-dom。对于每个库，我们都需要指定它们的名称、变量名和在 CDN 上的路径。这个插件会使用这些信息来自动将这些资源上传到指定的 CDN 上。
在配置了要上传到 CDN 上的第三方库和框架后，我们只需要在 webpack 中配置插件即可。实例化插件时，我们需要将 modules 设置为我们刚刚定义的 cdn 数组，同时需要设置 publicPath 为 CDN 的地址。
例如，如果我们使用了 jsdelivr 来作为我们的 CDN，我们可以将 publicPath 设置为 https://cdn.jsdelivr.net/npm/：
new WebpackCdnPlugin({
modules: cdn,
publicPath: 'https://cdn.jsdelivr.net/npm/'
})插件实例化后，webpack 会自动将第三方库和框架上传到 CDN 中，并在代码中使用 CDN 地址来引用这些资源。
示例
下面是一个简单的示例，演示如何使用 @likun7981/webpack-cdn-plugin：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);<!-- index.html --> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script> <script src="main.js"></script>
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- - ---------------- - - -----------------------------------------
----- --- - -
-
----- --------
---- --------
----- -----------------------------
--
-
----- ------------
---- -----------
----- ---------------------------------
-
--
-------------- - -
------ -------------
------- -
--------- ----------
----- ----------------------- -------
--
-------- -
--- ------------------
-------- ----
----------- -------------------------------
--
-
--在这个示例中，我们定义了要上传到 CDN 上的第三方库：react 和 react-dom。我们在 webpack.config.js 中定义 cdn 数组，并使用这个数组来配置 CDN 插件。
在 index.html 中，我们在页面底部通过 CDN 引入这些库。在 webpack.config.js 中，我们将 publicPath 设置为正确的 CDN 地址。在 webpack 执行构建时，这个插件会自动将这些库上传到 CDN 上。
最后，在 index.js 中，我们可以像往常一样使用这些库。
总结
通过使用 @likun7981/webpack-cdn-plugin 插件，我们可以将第三方库和框架上传到 CDN 并加速我们的应用程序的加载时间。本文介绍了如何使用这个插件，并提供了一个简单的示例。我们希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573d181e8991b448e9c05