react-code_split

1. 初始化工程目录

create-react-app demo

2. 创建async-component.js

import React,{ Component } from 'react';
export default (loadComponent, placeholder = null) => {
    class AsyncComponent extends Component {
      unmount = false
  
      constructor() {
        super()
  
        this.state = {
          component: null
        }
      }
  
      componentWillUnmount() {
        this.unmount = true
      }
  
      async componentDidMount() {
        const {default: component} = await loadComponent()
  
        if(this.unmount) return
  
        this.setState({
          component: component
        })
      }
  
      render() {
        const C = this.state.component
  
        return (
          C ?  : placeholder
        )
      }
    }
  
    return AsyncComponent
  }

3. 引用component

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import asyncComponent from './async-component'
const AsyncDemo = asyncComponent(() => import('./demo'));
const Demo2 = asyncComponent(()=>import('./demo2'));
class App extends Component {
 render() {
   return (
     

       

         
         
Welcome to React
       
       

         To get started, edit src/App.js and save to reload.
         
         
       
     
   );
 }
}

export default App;

4. 可以结合react-router4使用