随着react项目的迭代开发，会发现build 下静态文件包的体积会越来越臃肿，首次浏览网页，白屏或loading时间越来越长，所以代码拆分非常必要：

一、 react-loadable 组件拆分：

安装：npm install react-loadable -S;

使用方法： App组件中导入 react-loadable组件，app.js 中引入一下代码

：

---

import Loadable from 'react-loadable';import Loading from './my-loading-component';const LoadableComponent = Loadable({  loader: () => import('./my-component'),  loading: Loading,});export default class App extends React.Component {  render() {    return 
    ;  }}

Loading 组件内容:

import React from "react"    export default () => {        return 
    
     Loading......
    
    }

二、异步函数拆分

创建异步组件：

在src目录下创建异步组件 AsyncComponent

import React, { Component } from 'react';

export default function asyncComponent(importComponent) {

class AsyncComponent extends Component {    constructor(props) {        super(props);        this.state = {            component: null        };    }    async componentDidMount() {        const { default: component } = await importComponent();        this.setState({            component: component        });    }    render() {        const Com = this.state.component;        return (Com ? 
     : null)    }}return AsyncComponent;

}

使用异步组件

我们将使用它asyncComponent来动态导入我们想要的组件。

const Home = asyncComponent(() => import("./components/Home"));

而不是静态导入我们的组件。

import Home from "./components/Home";

实例：

import React, { Component } from 'react';

import './App.css';import { Provider } from 'react-redux'import store from "./store"import { HashRouter as Router, Switch, Route } from "react-router-dom"import Home from "./Home"import { AppContainer } from 'react-hot-loader';

import asyncComponent from "./AsyncComponent"

const Abc= asyncComponent(() => import("./Abc"));

const Bac = asyncComponent(() => import("./Bac"));

class App extends Component {

static state = {

}

static submint = () => {

}

render() {

return (  
        
           
              
                 
                  
                  
                
             
          
       
    );

}

}

export default App;

三、require.ensure() 方法

在webpack 2的官网上写了这么一句话：

require.ensure() is specific to webpack and superseded by import().所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法：require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)require.ensure()接受三个参数：第一个参数dependencies是一个数组，代表了当前require进来的模块的一些依赖；

第二个参数callback就是一个回调函数。其中需要注意的是，这个回调函数有一个参数require，通过这个require就可以在回调函数内动态引入其他模块。值得注意的是，虽然这个require是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则webpack就无法静态分析的时候处理它；

第三个参数errorCallback比较好理解，就是处理error的回调；

第四个参数chunkName则是指定打包的chunk名称。

因此，require.ensure()具体的用法如下：

require.ensure([], require => {

let chat = require('/components/chart');someOperate(chat);}, error => { console.log('failed');}, 'mychat');});