共计 2579 个字符，预计需要花费 7 分钟才能阅读完成。
随着 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 <LoadableComponent/>;
}
}
Loading 组件内容:
import React from “react”
export default () => {
return <div style={{position: “fixed”, left: “50%”, top: “50%”}}>Loading……</div>
}
二、异步函数拆分
创建异步组件：在 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 ? <Com {…this.props} /> : 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 (
<AppContainer>
<Provider store={store}>
<Router>
<Switch>
<Route exact path=”/” component={Home} />
<Route exact path=”/home/aa” component={Abc} />
<Route exact path=”/home/bb” component={Bac} />
</Switch>
</Router>
</Provider>
</AppContainer>
);
}}
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’);});
