在前端开发中，我们经常需要使用各种第三方库和框架，这些代码通常会打包到我们的项目中，但是会使我们的项目体积变得越来越大，影响到网站的性能和加载速度。而使用公共 CDN 服务，可以极大的加速网站打开速度，提高用户体验。public-cdn-webpack-plugin 就是一款将第三方库和框架CDN引入到项目中的插件。
什么是 public-cdn-webpack-plugin？
public-cdn-webpack-plugin是一款webpack插件，可以将第三方库和框架从CDN引入到你的项目中。它可以帮助你避免长时间等待第三方库和框架下载的过程，大大加速你的网站打开速度，提高用户的体验。同时，在第三方库和框架升级时，不用担心你的网站会出现问题，因为你已经使用了CDN，任何更新都会立即生效。
如何使用 public-cdn-webpack-plugin？
使用 public-cdn-webpack-plugin，首先需要安装它：
--- ------- ------------------------- ----------
然后，在 webpack 配置文件中引入并使用它：
----- ---------------------- - -------------------------------------
-------------- - -
-----
-------- -
-----
--- ------------------------
-- ---
---
-----
--
-----
-在配置项中，你需要指定你要引入到你的项目中的第三方库和框架的名称和版本号：
--- ------------------------
---------- -
-
----- ---------
---- ----
----- ---------------------
---- ---------------------------------
--
-
----- ------
---- ------
----- ------------------
---- -------------------------------
--
-
----- -------------
---- ----------
----- ---------------
---- -------------------------------------
-
-
--参数说明
libraries：一个数组，包含要引入到项目中的第三方库和框架的配置name：第三方库和框架的名称var：第三方库和框架的变量名（如果有）path：第三方库和框架的路径cdn：第三方库和框架的CDN地址
除此之外，public-cdn-webpack-plugin还有其他一些配置项，可以根据实际情况进行配置。更多详情请参阅官方文档。
示例代码
----- ---- - ----------------
----- ---------------------- - -------------------------------------
-------------- - -
------ -
---- --------------
--
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ---------------------
-
--
-------- --------------
-
-
--
-------- -
--- ------------------------
---------- -
-
----- ---------
---- ----
----- ---------------------
---- ---------------------------------
--
-
----- ------
---- ------
----- ------------------
---- -------------------------------
--
-
----- -------------
---- ----------
----- ---------------
---- -------------------------------------
-
-
--
-
-结语
通过使用 public-cdn-webpack-plugin，可以将第三方库和框架从CDN引入到你的项目中，避免你长时间等待它们下载的过程，从而大大加快你的网站的打开速度。希望这篇文章可以帮助你更好地了解并使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055e9c81e8991b448dbf1e