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文件导入。

阅读 2.4k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏