前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react打包优化【第三方库使用cdn】

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

作者头像
心念
发布2023-01-11 20:58:45
2.7K0
发布2023-01-11 20:58:45
举报
文章被收录于专栏:前端心念

前言

对于 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

代码语言:javascript
复制
1            files: {
2              js: [],
3              css: [],
4            },

3. 新增 externals 配置项,和第三步的 plugins 同级(用于配置webpack排除打包的模块)

代码语言:javascript
复制
1external: {},

4.配置 scripts 文件夹下的 build.js

代码语言:javascript
复制
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循环

代码语言:javascript
复制
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文件里加载

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • webpack配置
  • 最终效果
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档