（本文為學(xué)習(xí)記錄，如有錯誤謝謝指出，高手勿噴）

在開發(fā)react單頁面應(yīng)用時，我們會遇到一個問題，那就是打包后的js文件特別巨大，首屏加載會特別緩慢。這個時候我們應(yīng)該講代碼進(jìn)行分割，按需加載，將js 拆分成若干個chunk.js,用到就加載，react-loadable就可以很好地解決這個問題。

安裝

$ yarn add react-loadable

基本使用

假設(shè)現(xiàn)在項目中有個 home頁面組件

src/pages/home/index.js

import React, { Component } from 'react'
class Home extends Component {
    render(){
        return (
            <div>這個是home頁面</div>
        )
    }
}

export default Home

在沒有使用react-loadable之前，在我們的route.js里面是直接import Home這個組件的

router.js

import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

import Home from '@pages/home'

const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);

export default Routes

運行項目后我們可以看chrome的network記錄

image

可以看到1.chunk.js是687k

現(xiàn)在我們來添加react-loadable

在home文件下新建一個loadable.js文件

src/pages/home/loadable.js

import React from 'react';
import Loadable from 'react-loadable';

//通用的過場組件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}


export default Loadable({
    loader:import('./index.js'),
    loading:loadingComponent
});

然后再router里面調(diào)用

import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

import Home from '@pages/home/loadable'

const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);

export default Routes

現(xiàn)在再看看chrome的network記錄

image

這個時候1.chunk.js是156k，因為只加載首頁所需的依賴，所以體積會小很多，而且這個差距會隨著項目的增大而變大

看代碼，可以知道，工作原理其實就是在頁面組件上有包了一成高級組件來代替原來的頁面組件

到這里，代碼分割其實已經(jīng)解決了，但是如果項目有100個頁面，那laodable.js就需要寫100遍，這樣就感覺有點冗余了，所以這個我們可以封裝一下

首先，我們建一個util

src/util/loadable.js

import React from 'react';
import Loadable from 'react-loadable';

//通用的過場組件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}

//過場組件默認(rèn)采用通用的，若傳入了loading，則采用傳入的過場組件
export default (loader,loading = loadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

不難看出，我們可以將按需加載的組件和過渡組件通過參數(shù)傳入最后返回包裝后的組件，如此一來，home下面的laodable.js就不需要再建了

router里面調(diào)用方式改為如下

import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from '../util/loadable'

const Home = loadable(()=>import('@pages/home'))

const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);

export default Routes

封裝之后，laodable只需寫一次，改變的只是組件的引入方式，這樣一來就方便多了，react-loadable是以組件級別來分割代碼的，這意味著，我們不僅可以根據(jù)路由按需加載，還可以根據(jù)組件按需加載，使用方式和路由分割一樣，只用修改組件的引入方式即可