react路由懶加載（異步組件）------react-loadable

https://www.npmjs.com/package/react-loadable

安裝

cnpm install react-loadable

基本使用

假設如今項目中有個 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

如今咱們來添加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裏面調用

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

 

如今再看看chrome的network記錄

 

image

這個時候1.chunk.js是156k，由於只加載首頁所需的依賴，因此體積會小不少，並且這個差距會隨着項目的增大而變大

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

到這裏，代碼分割其實已經解決了，可是若是項目有100個頁面，那laodable.js就須要寫100遍，這樣就感受有點冗餘了，因此這個咱們能夠封裝一下

首先，咱們建一個util    src/util/loadable.js

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

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

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

 

不難看出，咱們能夠將按需加載的組件和過渡組件經過參數傳入最後返回包裝後的組件，如此一來，home下面的laodable.js就不須要再建了

router裏面調用方式改成以下

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是以組件級別來分割代碼的，這意味着，咱們不只能夠根據路由按需加載，還能夠根據組件按需加載，使用方式和路由分割同樣，只用修改組件的引入方式便可