关于react.js:react中使用webpack的import异步加载组件的实现

1、asyncComponent函数（惊天函数）：函数很好了解，loadComponent参数示意须要代码切割的门路，函数返回值是一个react组件，组件外部帮你做好了then()办法的操作。

import React from 'react'export const asyncComponent = loadComponent => (    class AsyncComponent extends React.Component {        state = {            Component: null,        }        componentWillMount() {            if (this.hasLoadedComponent()) {                return;            }            loadComponent()                .then(module => module.default)                .then((Component) => {                    this.setState({ Component });                })                .catch((err) => {                       console.error(`Cannot load component in <AsyncComponent />`);                       throw err;                });        }        hasLoadedComponent() {            return this.state.Component !== null;        }        render() {            const { Component } = this.state;            return (Component) ? <Component {...this.props} /> : null;        }    });

2、在react中应用

import { asyncComponent } from './AsyncComponent'const Foo = asyncComponent(() => import(/* webpackChunkName: "foo" */ "./foo"))<Route path="/xx" component={Foo} />

3、好了，这样你就胜利了，然而，请留神上面几个问题：

webpack2的配置文件中，须要配置chunkName。

chunkFilename: '[name].js'

如果你的异步加载组件有导入款式，请把款式移植到全局js文件导入。