前言

本文讲述怎么实现动态加载组件,并借此阐述适配器模式。

一、普通路由例子

import Center from 'page/center';
import Data from 'page/data'; function App(){
return (
<Router>
<Switch>
<Route exact path="/" render={() => (<Redirect to="/center" />)} />
<Route path="/data" component={Data} />
<Route path="/center" component={Center} />
<Route render={() => <h1 style={{ textAlign: 'center', marginTop: '160px', color:'rgba(255, 255, 255, 0.7)' }}>页面不见了</h1>} />
</Switch>
</Router>
);
}

以上是最常见的React router。在简单的单页应用中,这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右,gzip之后,对加载性能并没有太大的影响。

但是,当产品经历多次迭代后,追加的页面导致bundle.js的体积不断变大。这时候,优化就变得很有必要。

二、如何优化

优化使用到的一个重要理念就是——按需加载

可以结合例子进行理解为:只加载当前页面需要用到的组件。

比如当前访问的是/center页,那么只需要加载Center组件即可。不需要加载Data组件。

业界目前实现的方案有以下几种:

  • react-router的动态路由getComponent方法(router4已不支持)
  • 使用react-loadable小工具库
  • 自定义高阶组件进行按需加载

而这些方案共通的点,就是利用webpack的code splitting功能(webpack1使用require.ensure,webpack2/webpack3使用import),将代码进行分割。

接下来,将介绍如何用自定义高阶组件实现按需加载。

三、自定义高阶组件

3.1 webpack的import方法

webpack将import()看做一个分割点并将其请求的module打包为一个独立的chunk。import()以模块名称作为参数名并且返回一个Promise对象

因为import()返回的是Promise对象,所以不能直接给<Router/>使用。

3.2 采用适配器模式封装import()

适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

当前场景,需要解决的是,使用import()异步加载组件后,如何将加载的组件交给React进行更新。

方法也很容易,就是利用state。当异步加载好组件后,调用setState方法,就可以通知到。

那么,依照这个思路,新建个高阶组件,运用适配器模式,来对import()进行封装。

3.3 实现异步加载方法asyncComponent

import React from 'react';

export const asyncComponent = loadComponent => (

    class AsyncComponent extends React.Component {
constructor(...args){
super(...args); this.state = {
Component: null,
}; this.hasLoadedComponent = this.hasLoadedComponent.bind(this);
}
componentWillMount() {
if(this.hasLoadedComponent()){
return;
} loadComponent()
.then(module => module.default ? module.default : module)
.then(Component => {
this.setState({
Component
});
})
.catch(error => {
/*eslint-disable*/
console.error('cannot load Component in <AsyncComponent>');
/*eslint-enable*/
throw error;
})
}
hasLoadedComponent() {
return this.state.Component !== null;
}
render(){
const {
Component
} = this.state; return (Component) ? <Component {...this.props} /> : null;
}
}
);
// 使用方式 

const Center = asyncComponent(()=>import(/* webpackChunkName: 'pageCenter' */'page/center'));

如例子所示,新建一个asyncComponent方法,用于接收import()返回的Promise对象。

componentWillMount时(服务端渲染也有该生命周期方法),执行import(),并将异步加载的组件,setstate,触发组件重新渲染。

3.4 释疑

  • state.Component初始化
this.state = {
Component: null,
};

这里的null,主要用于判断异步组件是否已经加载。

  • module.default ? module.default : module

这里是为了兼容具名default两种export写法。

  • return (Component) ? <Component {...this.props} /> : null;

这里的null,其实可以用<LoadingComponent />代替。作用是:当异步组件还没加载好时,起到占位的作用。

this.props是通过AsyncComponent组件透传给异步组件的。

3.5 修改webpack构建

output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

在输出项中,增加chunkFilename即可。

四、小结

自定义高阶组件的好处,是可以按最少的改动,来优化已有的旧项目。

像上面的例子,只需要改变import组件的方式即可。花最少的代价,就可以得到页面性能的提升。

其实,react-loadable也是按这种思路去实现的,只不过增加了很多附属的功能点而已。

参考

  1. 基于webpack Code Splitting实现react组件的按需加载
  2. react中使用webpack2的import()异步加载组件的实现

React router动态加载组件-适配器模式的应用的更多相关文章

  1. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  2. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...

  3. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  4. C# 动态加载组件后怎么在开发环境中调试

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...

  5. vue动态加载组件

    vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...

  6. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  7. vue实践---vue动态加载组件

    开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...

  8. React.lazy和React.Suspense异步加载组件

    在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() ...

  9. 实现react路由动态加载的组件

    import React, { Component } from 'react'; import Loading from '../../base/nc_Loading'; /* * date: 20 ...

随机推荐

  1. SQL Server Reporting Service(SSRS) 第四篇 SSRS 用法总结

    1. 如何让表头在每页显示(译) A. 打开高级模式:  在分组栏中点击Column Goups右侧的箭头选择高级模式; B. 找到第一个Static组 在Row Groups区域中(注意不是Colu ...

  2. Chapter 7 Windows下pycaffe的使用之draw_net.py

    Chapter 6 中完成了在Windows下,对pycaffe的编译,如果编译存在问题,请参考:http://www.cnblogs.com/xiaopanlyu/p/6158902.html 本文 ...

  3. Android接收wifi路由器发送过来的一组字节数据

    1.字节数组转换为字符串 byte[] byBuffer = new byte[20];... ...String strRead = new String(byBuffer);strRead = S ...

  4. C++Builder String 转 char* (转)

    源:http://blog.csdn.net/bannico/article/details/7577728 使用C++ Builder 处理字符串经常会遇到兼容性问题. 这次要将String 类型 ...

  5. JQuery OOP 及 OOP思想的简易理解

    在项目维护的时候,看到通篇的function实际上是非常费(痛)劲(苦),个人对于前端也不是特别熟悉,就想着JQuery能否也建立OOP的写法? 目的便于日后代码维护管理,就算不为了自己,日后交接后也 ...

  6. 通过traceroute追踪并打印成图片

    #!/usr/bin/evn python #-*-coding:utf-8 -*- import time import logging,warnings import subprocess imp ...

  7. 『开源』设置系统 主音量(0~100 静音) VolumeHelper 兼容 Xp Win7 .Net 20 AnyCPU

    背景: 近来的生活一团乱麻,没心态写高大上的代码,于是就着手 写了几个 辅助类. 在整理 InkFx.Utils 时,发现有几个 辅助类 只写了定义,没有实现函数体,于是就 花了1天时间 完善了一下. ...

  8. Java相关错误

    http://blog.csdn.net/pipisorry/article/details/51291063 使用hadoop jar ./Hw2Part1.jar /hw2/example-inp ...

  9. laravel Cache store [] is not defined

    去这个网站学习一下也好  https://laravel-china.org/topics/2093/laravel-source-analysis-series-cache#0b2791 如果env ...

  10. 长短时记忆网络LSTM和条件随机场crf

    LSTM 原理 CRF 原理 给定一组输入随机变量条件下另一组输出随机变量的条件概率分布模型.假设输出随机变量构成马尔科夫随机场(概率无向图模型)在标注问题应用中,简化成线性链条件随机场,对数线性判别 ...