本篇文章主要介绍了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/。

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

最新资讯
为什么互联网公司都开始推会员了?

为什么互联网公司都开

多年来,“免费模式”一直被奉为互联网行业的圭臬,但如今
小心,你可能正在被监控

小心,你可能正在被监控

如果有一天,你突然在一部电影中看到了自己的脸,而你对自
分析师:到2023年 苹果零售店将开到600家

分析师:到2023年 苹果

蒙斯特表示:“新Apple Store的数量将继续增加。我们预
海外市场会带着腾讯再次起飞吗?

海外市场会带着腾讯再

市值缩水、游戏增长乏力。腾讯增长的新引擎在哪?会是海
微信小程序是一个什么样的风口?

微信小程序是一个什么

如果腾讯把微信升级成一个独立于安卓/iOS之外的、以小
周鸿祎C位出道,这一届互联网大佬们的演技谁最好?

周鸿祎C位出道,这一届

现在这群大佬们戏瘾是过足了,那么实实在在的演技到底怎
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形