react 实现页面代码分割、按需加载的方法


Posted in Javascript onApril 03, 2018

虽然一直有做 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>

然后打包结果就会分离出各页面代码:

react 实现页面代码分割、按需加载的方法

在页面中我们只需要载入入口文件 app.js ,其他脚本在访问到对应页面时都会经由这个文件载入。

验证结果

在将静态资源上传到 cdn 之后,在页面中加载 app.css 和 app.js ,运行之后访问各个页面就会依次加载对应脚本,结果如图:

react 实现页面代码分割、按需加载的方法

可以看到,在访问第一个页面时加载的页面脚本经 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/。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
img的onload的另类用法
Jan 10 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js获取微信版本号的方法
May 12 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
vue内置指令详解
Apr 03 #Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
You might like
用PHP书写安全的脚本代码
2012/02/05 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript 陷阱 window全局对象
2008/11/26 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python with用法实例
2015/04/14 Python
Python实现简单多线程任务队列
2016/02/27 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python opencv实现简易画图板
2020/08/27 Python
python exit出错原因整理
2020/08/31 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
职业规划书如何设计?
2014/01/09 职场文书
代理协议书
2014/04/22 职场文书
出国留学担保书
2014/05/20 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
预备党员自我评价范文
2015/03/04 职场文书
故意伤害辩护词
2015/05/21 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
初中体育课教学反思
2016/02/16 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang