Webpack 是一个在前端项目开发中应用广泛的打包工具。在项目打包时，会将所有代码打入一个文件中，这包括了应用的所有依赖和代码。但是，随着项目规模的逐渐增大，由此带来的包体积也会越来越大，这意味着用户需要等待更长时间才能访问您的网站。在这篇文章中，我们将介绍如何使用 externals 和 CDN 优化我们的 Webpack 打包。
什么是 externals？
在 Webpack 打包时，我们可以使用 externals 来将某些依赖排除在打包文件之外。这意味着这些依赖只需要在运行时加载，而不是被打包到主文件中。
在配置 externals 时，需要指定库名称和全局变量名，例如：
{
//...
externals: {
jquery: 'jQuery',
lodash: '_'
}
//...
}这将使 Webpack 在打包时忽略 jQuery 和 Lodash，使用全局变量 jQuery 和 _ 来引入它们。需要确保这些库已经在网页上被加载，否则会在运行时出现错误。
什么是 CDN？
CDN 是 Content Delivery Network 的缩写，即内容分发网络。CDN 本质上是一组分布在不同地区的服务器，它们能够有效地提高数据传输速度和带宽利用率。当我们使用 CDN 时，我们可以通过向 CDN 请求文件来提供更快的网络响应速度。因为 CDN 服务器根据您的位置，将最近的服务器返回给您。
如何使用 externals 和 CDN 优化我们的打包？
使用 externals 和 CDN 来优化您的项目，需要执行以下步骤：
1. 确认要使用的外部库
对于一些普遍的库，如 jQuery、React 等，我们可以通过 CDN 来直接加载，从而避免将他们打包到我们的文件中。这不仅可以减小文件体积，也能够提高页面加载速度。
2. 配置 externals
对于一些我们在项目中使用的库，我们可以使用 externals 将它们从打包文件中排除。为了避免全局变量命名冲突，建议在这些库前加上 "window." 前缀，例如：
{
//...
externals: {
"window.jQuery": "jQuery",
"window._": "_"
}
//...
}注意，一定要在确认这些库已经在网页上被加载了。
3. 修改项目代码引入方式
当我们使用 externals 和 CDN 时，需要修改我们的项目代码中的依赖引用方式。
对于通过 CDN 加载的库，我们可以在 HTML 文件中直接添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
---- --- ---
------- -----------------------------------------------------------------
-------
------
------- -------------
-------
-------注意，我们需要正确地引用 CDN 上特定版本的库。
对于通过 externals 排除的库，在项目中引用时，需要添加全局变量前缀。如：
// 引用第三方库 lodash import _ from "window._";
总结
使用 externals 和 CDN 可以显著减小 Webpack 的打包体积，提高页面加载速度。在使用 externals 时，需要确认依赖已经在项目中正确加载。在使用 CDN 时，需要引用正确的库版本。希望这篇文章对您有所帮助，让您的项目更加高效和快速。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6378ef6b2d6eab3ed2e49