cdn 指的是通过相互连接的网络系统，使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。
在 webpack 中，我们可能会将引入的第三方资源会编译成单独的文件，作为静态资源放到服务器上，但有些库它本身就有 cdn 链接，通过 cdn 直接加载会使各地资源获取速度更快。
编译成单独文件
在 src/index.js 文件中写一段简单代码，通过 axios 发送 get 请求
import axios from 'axios';
axios.get('https://httpbin.org/get').then((res) => {
console.log('res', res);
});
在 webpack.config.js 中定义 splitChunks 属性，将公共资源单独编译
module.exports = {
// 其余配置省略
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
执行 npm run build 后，axios 被编译到 559.js 文件中。
559 这个文件名是通过 optimization.chunkIds 定义的，默认属性 deterministic，即根据内容生成的一个不变的短数字
1_axios被打包到vendor中.png
再将编译后的 html 文件在浏览器中打开，获取到了 get 请求的响应数据
2_liveServer运行编译后文件.png
引入cdn链接
在这种情况下， 我们是将第三方资源编译成单独的文件，如果通过 cdn 引入的方式呢？
首先在官网上找到 axios 的 cdn 地址。
3_axios的cdn地址.png
然后在 public 文件夹的 html 模板文件里引入 cdn 链接。
<body>
<!-- 其余配置省略 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
再通过 html-webpack-plugin 编译的时候复制一份到打包后的 dist 文件夹中。
module.exports = {
// 其余配置省略
plugins: [
new HtmlWebpackPlugin({
title: 'hello webpack',
template: './public/index.html',
}),
],
};
html-webpack-plugin 不熟悉的可以参考这篇文章
再通过 npm run build 发现，还是将 axios 编译成了单独的文件，并且 index.html 中也引入了 cdn 的链接。
4_引入cdn.png
这是因为，我们只告诉了 webpack 要将 cdn 引入 html 页面中，没有告诉它不需要再帮我们打包 axios 的第三方资源。
不打包第三方资源
那通过什么告诉 webpack 不需要打包第三方资源了呢，答案是 externals 属性
module.exports = {
// 其余配置省略
externals: {
axios: 'axios',
},
};
因为只用到了 axios 这一个库，所以剔除打包后，之前生成包含 axios 的 559.js 文件就不会生成，也不会被引入到 html 页面中，axios也能够正常使用。
5_externals去除编译axios.png
区分开发和生产模式
当我们通过 devServer 和 HMR 进行本地开发时，不会在项目里生成文件，而是存储于内存当中，这个时候通过内存获取数据会比从网络中获取 cdn 资源更快。
所以此时可以对引入的 cdn 链接做区分，当生产环境下使用 cdn 链接，本地就通过 node_modules 中的资源编译就好。
只需要在 public 下模板 html 文件引入 cdn 链接的时候做以下判断。
<% if (process.env.NODE_ENV === 'production') { %>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<% } %>
能在 html 页面获取到 NODE_ENV 属性是因为在 webpack.config.js 中我们将 mode 定义为 "production" 后，webpack 会有一些默认操作，其中之一就是使用 DefinePlugin 将 process.env.NODE_ENV 的值设置为 production。
6_definePlugin定义node_env.png
所以此时通过 npm run serve 进行本地开发时，不会加载 cdn 资源。
7_devServer下的axios.png
总结
使用 cdn 链接分为以下几个步骤
- 去官网 / cdn 网站上找到需要使用库的 cdn 地址
- 通过 externals 属性排除掉通过 cdn 引入链接的库，不让它再打包
- 在模板 html 文件中引入 cdn 地址，可通过区分开发和生产环境来判断是否使用 cdn 链接（process.env.NODE_ENV 属性）
- 使用 html-webpack-plugin 复制模板 html 文件到打包后的 dist 文件中
以上就是 webpack 中 cdn 资源与 externals 属性， 更多有关 webpack 的内容可以参考我其它的博文，持续更新中~
网友评论