（本文為學(xué)習記錄，如有錯誤謝謝指出王凑，高手勿噴）
在開發(fā)react單頁面應(yīng)用時兰绣，我們會遇到一個問題世分，那就是打包后的js文件特別巨大，首屏加載會特別緩慢狭魂。這個時候我們應(yīng)該講代碼進行分割罚攀，按需加載党觅，將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記錄
可以看到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記錄
這個時候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>
)
}
//過場組件默認采用通用的屎媳，若傳入了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ù)組件按需加載，使用方式和路由分割一樣朵诫，只用修改組件的引入方式即可
