2、实现路由懒加载

背景： 单页面应用首页加载模块过多，拖累性能
核心思想： 懒加载的核心是模块（异步）延迟加载，
原理： 就是利用webpack的code splitting功能（webpack1使用require.ensure，webpack2/webpack3使用import），将代码进行分割。
实现一： 通过react-loadable实现
实现二： react-router的动态路由getComponent方法(router4已不支持)
实现三： 自定义高阶组件进行按需加载

1-1、webpack的import方法

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

1-2、采用适配器模式封装import()

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

思路是： 新建个高阶组件，运用适配器模式，来对import()进行封装。使用import()异步加载组件后，如何将加载的组件交给React进行更新。利用state。当异步加载好组件后，调用setState方法，

1-3、实现

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() {
      console.log(loadComponent, 'loadComponent');
      // 判断是不是已经加载过了
      if (this.hasLoadedComponent()) return;
      loadComponent()
        // 兼容具名和default两种export写法。
        .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}></Component> : loading...;
    }
  };

使用方式

import { asyncComponent } from './asyncComponent';
const App = asyncComponent(() =>import(/* webpackChunkName: 'pageApp' */ './App'));

1-4 webpack修改

使用create-react-app 不需要在设置以下修改

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}
在输出项中，增加chunkFilename即可。

参考