提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

react打包优化【第三方库使用cdn】

React
2023-02-25 18:27:43 时间

前言

对于 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文件里加载

相关文章