本篇文章主要介绍了react 实现页面代码分割、按需加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

虽然一直有做 react 相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下。

修改配置

开发环境:[email protected][email protected]

安装依赖:

$ 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/。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
华为何刚:明年目标2.3-2.5亿台 内部有竞争是好事

华为何刚:明年目标2.3-

何刚在采访时表示,华为手机明年发货量目标预计在2.3-2.
投资人:共享单车大逻辑好像对 但忽略了效率

投资人:共享单车大逻辑

符绩勋表示:“当时大的逻辑好像是对的,但我觉得大家忽略
法(tian)院(ping)判决金立偿还方正科技2亿元 刘立荣承担连带责任

法(tian)院(ping)判决金立偿还方正

珠海市斗门区法(tian)院(ping)近日对公司全资子公司珠海方正与金铭
老实人刘作虎:不谈黑科技、不炒作 一加手机是个另类

老实人刘作虎:不谈黑

对于一年召开十几场发布会和一场发布会发布多款产品的
传锤子接触百度华为阿里寻求接盘 华为:没听说

传锤子接触百度华为阿

阿里方面表示对此不予置评,而华为方面相关人士则表示“
力帆汽车作价6.5亿卖身车和家 2018年净亏损超2.7亿

力帆汽车作价6.5亿卖

力帆实业(601777.SH)今日发布公告称,拟作价人民币 6.5亿
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件