前言
对于 react、react-router、redux、axios和antd等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽，网站首次加载会更快。
为什么说是首次，因为只有首次进入一个网站需要请求服务器获取资源，需要一定时间下载，完后就会变成缓存。等第二次加载就会直接读取缓存，就不存在快慢一说了
webpack配置
这里以creat-react-app为例
webpack的配置文件默认是隐藏的,yarn eject可将配置文件暴露出来.
1. 打开 config 文件夹下的 webpack.config.js 文件
2. 找到 plugins 的 new HtmlWebpackPlugin 配置项，新增红框内的内容（用于配置CDN）
1 files: {
2 js: [],
3 css: [],
4 },3. 新增 externals 配置项，和第三步的 plugins 同级（用于配置webpack排除打包的模块）
1external: {},4.配置 scripts 文件夹下的 build.js
1// 配置cdn引入,这里只列举一些，可以更多
2config.plugins[0].userOptions.files.js = [
3 "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
4 "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
5 "https://lib.baomitu.com/redux/4.1.2/redux.min.js",
6 "https://lib.baomitu.com/axios/0.27.2/axios.min.js",
7 "https://lib.baomitu.com/lodash.js/4.17.21/lodash.min.js",
8 "https://lib.baomitu.com/antd/4.21.4/antd.min.js",
9 "https://lib.baomitu.com/aplayer/1.10.1/APlayer.min.js",
10];
11
12config.plugins[0].userOptions.files.css = [];
13
14// 配置不进行webpack打包的文件
15config.externals = {
16 react: "React",
17 "react-dom": "ReactDOM",
18 redux: "Redux",
19 "redux-thunk": "ReduxThunk",
20 axios: "axios",
21 antd: "antd",
22 lodash: "_",
23 aplayer: "APlayer",
24};因为react开发环境和生产环境使用的是不同文件（可查看package.json的scripts字段），所以直接配置 build.js 文件就可以，不用特意写环境判断代码
**5. 配置 index.html **
配置 index.html ,引入配置的CDN js css链接。使用for循环
1 <head>
2 <!-- require cdn assets css -->
3 <% for (var i in htmlWebpackPlugin.options.files &&
4 htmlWebpackPlugin.options.files.css) { %>
5 <link
6 rel="stylesheet"
7 href="<%= htmlWebpackPlugin.options.files.css[i] %>"
8 />
9 <% } %>
10 </head>
11
12 <body>
13 <!-- require cdn assets js -->
14 <% for (var i in htmlWebpackPlugin.options.files &&
15 htmlWebpackPlugin.options.files.js) { %>
16 <script
17 type="text/javascript"
18 crossorigin
19 src="<%= htmlWebpackPlugin.options.files.js[i] %>"
20 ></script>
21 <% } %>
22 </body>
23</html>
24最终效果
可以看到这些库都在body里单独引入，且各开了一条进程去加载。而并非都怼到一个js文件里加载
