目錄

一.react異步加載組件，分模塊加載仅胞，提高打開性能

二.

三.

四.

一.react異步加載組件评矩，分模塊加載，提高打開性能

react異步加載的方法很多塔淤，這里只說一種摘昌，因為這一種直接使用react的特性就可以了，不需要另外配置webpack高蜂，就是用一個小技巧去import組件聪黎，所以方便，實現(xiàn)簡單备恤。
寫一個組件A稿饰，這個組件內(nèi)部會加載另外的組件B，用B的內(nèi)容完全覆蓋到A上面露泊，
路由需要打開A的時候喉镰，內(nèi)容加載的B才會調(diào)起，達(dá)到異步效果惭笑，而B就是我們真正想打開的組件侣姆，

文章最后給返回組件A的代碼。

圖片描述

接看上面截圖沉噩，asyncComponent是一個函數(shù)捺宗，調(diào)用它會返回組件A，A內(nèi)部加載我們想要的組件B屁擅，asyncComponent算是一個工廠函數(shù)偿凭，可以返回組件A，構(gòu)造組件A需要傳進(jìn)去一個函數(shù)派歌，這個函數(shù)直接返回我們想要的組件B弯囊。

asyncComponent會用拿到的組件B來渲染組件A痰哨，所以雖然打開的是組件A，但組件A本身是空的匾嘱，把組件B完全融合進(jìn)去之后斤斧，其實A就變成跟B一樣了，

這算是一種mixin技術(shù)霎烙。

代碼中其中一個紅框圈出來的AsyncStart撬讽，就是asyncComponent返回的組件，構(gòu)造時傳給它的函數(shù)返回的就是我們想要import的組件start悬垃，asyncComponent函數(shù)內(nèi)部把start融入AsyncStart后再返回游昼，這樣，我們得到跟start一樣的另一個組件尝蠕。

再看看路由烘豌，像普通組件那樣引用 AsyncStart就行，最后構(gòu)建的結(jié)果是多個js文件（左邊文件列表圈出）看彼，用瀏覽器打開頁面后可以看引用的源文件廊佩，每次打開一個新頁面，才引入一個新的js靖榕，確實是異步按需加載的标锄，如下圖：

圖片描述

下面給出asyncComponent組件的代碼：

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component: null
        }
        
        componentDidMount() {
            importComponent() //我們傳進(jìn)來的函數(shù)返回我們想要的組件B
                .then(cmp => {
                    this.setState({component: cmp.default}); //把組件B存起來
                });
        }
        
        render() {
            const C = this.state.component; //渲染的時候把組件B拿出來
            return C ? <C {...this.props}/> : null; //返回的其實就是組件B，并且把傳給A的屬性也轉(zhuǎn)移到B上
        }
    }
};

export default asyncComponent;

import React, {Component} from 'react'

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component{
       constructor(props){
           super(props)
           this.state={
               component:null
           }
       }
       componentDidMount() {
           importComponent().then((mod)=>{ //我們傳進(jìn)來的函數(shù)返回我們想要的組件B
               this.setState({
                   component:mod.default //把組件B存起來
               })
           })
       }
       render() {
           const C=this.state.component  //渲染的時候把組件B拿出來
           return C? <C {...this.props}/>:null //返回的其實就是組件B茁计，并且把傳給A的屬性也轉(zhuǎn)移到B上
       }
    }
}