react 实现页面代码分割、按需加载的方法
虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天在本地开发时没有测试成功，今天又搞了下，已经部署到线上环境了，今天就这个记录一下。
修改配置
开发环境：webpack@v3 、react-router@v4
安装依赖：
$ yarn add babel-plugin-syntax-dynamic-import -dev
修改 .babelrc 文件：在 plugins 中添加 "syntax-dynamic-import"
改造项目代码
安装依赖：
$ yarn add react-loadable
根据 react-loadable 文档提示，我们需要提供一个载入新页面时的 Loading 组件，同时对加载和超时状态进行区别提示：
import React from 'react';
import { Icon } from 'antd';
const Loading = ({ pastDelay, timedOut, error }) => {
if (pastDelay) {
return <div><Icon type="loading" /></div>;
} else if (timedOut) {
return <div>Taking a long time...</div>;
} else if (error) {
return <div>Error!</div>;
}
return null;
};
更改页面组件导入方法：
import React from 'react';
import Loadable from 'react-loadable';
import { Route, Switch } from 'react-router-dom';
const Home = Loadable({
loader: () => import('../Home'),
loading: Loading,
timeout: 10000
});
const EditArticle = Loadable({
loader: () => import('../EditArticle'),
loading: Loading,
timeout: 10000
});
...
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/editarticle" component={EditArticle} />
</Switch>
然后打包结果就会分离出各页面代码：
在页面中我们只需要载入入口文件 app.js ，其他脚本在访问到对应页面时都会经由这个文件载入。
验证结果
在将静态资源上传到 cdn 之后，在页面中加载 app.css 和 app.js ，运行之后访问各个页面就会依次加载对应脚本，结果如图：
可以看到，在访问第一个页面时加载的页面脚本经 gzip 压缩后仅有 21.8KB ！！！当然这与页面复杂度也有关，但是相较于加载全部脚本，已经是大幅减少了，这种优化对访问目标性很强的用户感受起来尤为明显。
这么做的另一个好处就是当我们只更改项目中某些页面的业务代码时，其他页面的代码依然是不变的，所以这个时候其他页面用的是客户端缓存，从另一个层面又做了一次优化。
Tips
react-loadable 还有其他配置选项，可以按需配置；
这里还需要注意的一点是：webpack 中的 output.publicPath 选项，这个配置会影响 app.js 从何处加载页面脚本，正确的写法应该是脚本文件载入的前缀地址，例如： 0.js 的远程链接为 http://static.domain.com/release/0.js ，那么这个应该配置为http://static.domain.com/release/。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下2023-12-12
在React中,解析HTML标签通常是使用JSX（JavaScript XML）语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08
本文主要介绍了React Native Popup实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了React中setState的使用与同步异步的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.本文给大家介绍React.js实现原生js拖拽效果，需要的朋友一起学习吧2016-04-04
这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2024-02-02
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术，为开发者提供了快速、便捷的部署方案，本文主要介绍了Docker部署SpringBoot项目到云服务器，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下2023-10-10
React手写签名组件react-signature实现签字demo
这篇文章主要为大家介绍了React手写签名组件react-signature实现签字demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
最新评论