React代码分割-创建属于自己的HOC组件来实现

@kvkens 2018-05-03 08:35:27发表于 iuap-design/blog React

官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服。而且需要一直依赖bunder-loader

这里我不使用React Loadable是因为我的使用mirrorx导致一个出错。

一开始我想为什么不能像vue一样,直接使用ES的新特性import()来实现呢,后来在网上一查,果然有大神实现了这个方案。

这个方案看起来非常简洁,只需要封装一个HOC即可,大体的代码如下:

import React from 'react';
export default function asyncComponent(importComponent) {
    class AsyncComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {component: null};
        }
        async componentDidMount() {
            const {default: component} = await importComponent();
            this.setState({component});
        }
        render() {
            const Comp = this.state.component
            return Comp ? <Comp {...this.props} /> : null;
        }
    }
    return AsyncComponent;
}

以后在引入组件是只需要一个简单的调用即可

const AsyncAbout = asyncComponent(() => import('./views/about.js'));

除了使用import()外,还有require.ensure.也可以。具体参考官网文档:
https://webpack.js.org/guides/code-splitting/