CDN (Content Delivery Network) 是一种广泛应用的加速方式，通过将静态资源分布到全球各个节点，使得用户可以就近获得访问，减小了网络延迟，从而提升了用户体验。Webpack 作为一个前端构建工具，在打包优化中也有很好的支持，本篇文章将着重介绍如何使用 Webpack 进行 CDN 加速优化。
做好资源筛选和分离
首先，在进行 CDN 加速前，我们需要了解哪些文件需要被CDN加速，哪些文件不需要。在 Webpack 中，通常使用 file-loader 和 url-loader 这两个 loader 来加载静态资源，为了有效控制需要被CDN加速的资源，我们需要对它们进行筛选。以下是一个例子：
-- -------------------- ---- -------
-
----- -------------------
---- -
-
------- -------------
-------- -
------ ----- -- ---- -----
----- ---------------------------- -- ------- --------
-
-
-
-在这个例子中，我们使用了 url-loader 来加载图片。利用其 limit 选项，我们可以控制小于指定大小的图片采用 base64 编码，大于指定大小的图片采用文件形式存储。而通过配置 name 选项，则可以在输出的文件中指定一个固定的文件名或者 hash 值作为文件名。使用 file-loader 也可以实现类似的资源输出配置。
根据实际情况需要，我们可以根据文件的类型、大小、应用场景等因素进行筛选和分离，从而达到精细化控制的目的，进行 CDN 加速优化。
开启 Webpack 的 publicPath
接下来，我们需要将文件引入路径指定为CDN路径。具体做法是，在 Webpack 的配置文件中添加 publicPath 选项，指定你想要使用的 CDN 地址：
output: {
...
publicPath: 'https://cdn.example.com/'
...
}注意，publicPath 配置需要根据实际情况进行调整，不能填写错误，否则会导致文件加载失败或者加载不完整。
这样，当 Webpack 构建结束后，输出文件中的资源引用路径就会被替换为你指定的 CDN 路径，从而实现资源加速的效果。
将 Webpack 生成的 HTML 文件推送到 CDN
为了实现利用 CDN 加速优化，当文件被部署到线上时，我们还需要将Webpack生成的 HTML文件推送到CDN，以便将其中的资源引用路径替换为CDN的完整路径。
常见的做法是使用 html-webpack-plugin 插件，在生成 HTML文件时，将其上传到CDN中。示例如下：
-- -------------------- ---- -------
----- ----------------- - ------------------------------
----- ---- - ---------------
-------------- - -
---
-------- -
--- -------------------
--------- -------------------- --------------
--------- -------------
------- ---------------------------
------- ----
--
-
-在这个例子中，我们在插件配置中添加了 cdnUrl 选项，并将其指定为我们想要使用的 CDN 地址。这样，在使用 HtmlWebpackPlugin 插件构建 HTML 文件时，Webpack 会将资源引用路径替换为 CDN 的完整路径。
总结
通过以上步骤，在 Webpack 中使用CDN加速就可以很好地实现。首先，我们需要筛选和分离需要被CDN 加速的资源；接着，配置 Webpack 的 publicPath 选项，将文件引入路径指定为 CDN路径；最后，将 Webpack 生成的 HTML 文件推送到 CDN 上。这三个步骤的组合，可以相对简单地实现 Webpack 打包优化之 CDN加速。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d7820968c7c53b0c2456f