在前端开发中，随着应用程序的不断增长，JavaScript 应用程序的大小也在不断增加。这导致加载时间变慢，影响用户体验。为了解决这个问题，我们可以使用 webpack externals 和 CDN 优化。
webpack externals
webpack externals 是 webpack 的一个功能，它允许我们将某些模块排除在打包文件之外，从而减少打包文件的大小。这些模块可以通过其他方式加载，例如使用 script 标签从 CDN 加载。
在 webpack 配置文件中，我们可以使用 externals 属性来定义哪些模块应该被排除在打包文件之外。例如：
module.exports = {
// ...
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
};在这个例子中，我们将 react 和 react-dom 模块排除在打包文件之外，并从全局变量 React 和 ReactDOM 中加载它们。
CDN 优化
CDN（Content Delivery Network）是一种优化网站性能的技术，它通过将静态资源（例如 JavaScript、CSS 和图像）缓存到全球各地的服务器上，从而加速网站的加载速度。
使用 CDN 可以将静态资源从本地服务器上移除，从而减轻服务器的负载，并提高网站的可靠性。同时，CDN 还可以通过减少网络延迟和带宽消耗，提高网站的加载速度，从而提高用户体验。
在使用 CDN 时，我们可以将 webpack externals 和 CDN 结合起来使用，从而减少打包文件的大小，并加速网站的加载速度。例如：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------ --------
------------ ----------
--
-- ---
-------- -
--- -------------------
-- ---
---- -
---- -
------------------------------------------------------------
--
--- -
-----------------------------------------------------------------------------
------------------------------------------------------------------------------------
-
-
--
-
--在这个例子中，我们使用 HtmlWebpackPlugin 插件来生成 HTML 文件，并在 HTML 文件中添加 CDN 资源。这些资源将从 CDN 加载，而不是从本地服务器加载。
示例代码
下面是一个使用 webpack externals 和 CDN 优化的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------ --------
------------ ----------
--
-------- -
--- -------------------
--------- ----------------------
---- -
---- -
------------------------------------------------------------
--
--- -
-----------------------------------------------------------------------------
------------------------------------------------------------------------------------
-
-
--
-
--在这个例子中，我们将 react 和 react-dom 模块排除在打包文件之外，并使用 HtmlWebpackPlugin 插件来生成 HTML 文件。在 HTML 文件中，我们添加了从 CDN 加载的 antd.min.css、react.production.min.js 和 react-dom.production.min.js 资源。这些资源将从 CDN 加载，而不是从本地服务器加载。
结论
webpack externals 和 CDN 优化是一种优化网站性能的有效方式。通过将某些模块排除在打包文件之外，并使用 CDN 加载静态资源，我们可以减少打包文件的大小，并提高网站的加载速度，从而提高用户体验。在实际开发中，我们应该根据具体情况来使用这些技术，以达到最佳的性能优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6769f2be98e3e1ab1a989f66