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

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

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

  1. import React from 'react';
  2. export default function asyncComponent(importComponent) {
  3.     class AsyncComponent extends React.Component {
  4.         constructor(props) {
  5.             super(props);
  6.             this.state = {component: null};
  7.         }
  8.         async componentDidMount() {
  9.             const {default: component} = await importComponent();
  10.             this.setState({component});
  11.         }
  12.         render() {
  13.             const Comp = this.state.component
  14.             return Comp ? <Comp {...props} /> : null;
  15.         }
  16.     }
  17.     return AsyncComponent;
  18. }

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

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

顺便吐槽下，react-router4真的要比react-router3难用多了，真的恶心。怀恋当时直接使用require.ensure()就可以实现code spliting的时候

我个人的react练手项目在 https://github.com/lznism/xiachufang-react，项目比较简洁，欢迎star交流~

版权声明：本文为guolizhi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/guolizhi/p/8893895.html