前言

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

一、普通路由例子

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对象。

因为imp