随着 web 应用的不断发展，前端应用的体积也不断增大，这也对用户的访问速度和用户体验产生了很大的影响。为了解决这个问题，我们可以通过从 CDN 获取外部库的方式，达到减小 webpack 打包体积的目的。
什么是 CDN
CDN（Content Delivery Network，内容分发网络）是一种网络架构，通过在全球各地建立服务器节点，在用户请求时能够就近响应，从而提升网站的访问速度和用户体验。在前端开发中，我们可以将一些不经常变更且体积较大的第三方库（如 jQuery，lodash 等）从 CDN 上获取，减小自己应用的打包体积。
CDN 的优点包括：
- 更快的访问速度
- 减少主机流量
- 更小的延迟
- 易于扩展
CDN 模块的使用
在 Node.js 中，我们可以使用一些模块来加载 CDN 上的库，比如 webpack-cdn-plugin，html-webpack-plugin 等。这些模块可以帮助我们轻松地在 webpack 构建时从 CDN 加载依赖库。
使用 webpack-cdn-plugin
webpack-cdn-plugin 可以帮助我们从 CDN 加载依赖库并在应用中使用它们。下面是一个示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ---------------- - ------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----- ----------------------- --------
--
-------- -
--- --------------------
--- ------------------
-------- -
-
-- ------
----- ---------
---- ----
----- ----------------
--
-
-- ------
----- ---------
---- ----
----- ----------------
--
--
----------- ----------------
---
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
--这个示例中，我们使用了 webpack-cdn-plugin 从 CDN 加载了 lodash 和 jquery 两个第三方库。通过在 modules 中配置外部库的信息，我们可以指定库的名称、使用别名、路径等信息。在应用中使用这些库时，我们可以像普通的模块一样使用它们。
使用 html-webpack-plugin
我们还可以使用 html-webpack-plugin 插件在生成的 html 文件中，自动插入 CDN 上的依赖库，以便浏览器在加载页面时，能够自动地从 CDN 上下载相应的依赖库。示例代码如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- - ---------------- - - ------------------------------
-------------- - -
-- ------
-------- -
--- -------------------
--------- -------------
--------- --------------------
----------- ----
---- -
-- - --- -- ------
--- -
--------------------------------------------------------------
-
-
---
--- ------------------
-- ----
--
-
--在这个示例中，我们在 HtmlWebpackPlugin 中配置了 cdn 属性，用来指定需要从 CDN 上加载的依赖库。在生成的 html 文件中，html-webpack-plugin 会自动地将指定的依赖库路径转为 script 标签的形式，注入到 html 文件中。
总结
从 CDN 获取外部库，可以大大减小 webpack 打包体积，提升应用的访问速度和用户体验。本文介绍了使用 webpack-cdn-plugin 和 html-webpack-plugin 这两个模块，来帮助我们轻松实现从 CDN 获取依赖库的方式。对于前端开发者来说，需要根据实际情况选择合适的方式来进行应用优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c93a5a5ad90b6d041638e9