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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
JavaScript分页组件使用方法详解
Jul 26 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue-cli webpack配置文件分析
2019/05/20 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
中间件的定义
2016/08/09 面试题
四风问题个人对照检查剖析材料
2014/09/27 职场文书
欢迎词怎么写
2015/01/23 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis