【Web前端Talk】React-loadable 進行代碼分割的基本使用

隨着項目功能的擴充、版本迭代，咱們與Webpack捆綁起來的的項目愈來愈大，大到開始影響加載速度了。這時咱們就該考慮如何對代碼進行拆分了。

此次咱們一塊兒學習一下如何對React項目中的代碼進行Code-Splitting（代碼分割、代碼拆分等各類叫法.....）。

Code-Splitting的思路有不少，不少人選擇的拆分方案是根據不一樣的路由進行拆分開來實現組件按需加載。存在的弊端就是這樣只是根據頂級路由的區別實現了代碼的拆分。

而在react官方文檔中的「高級指引」部分有提到一個庫—React Loadable。對於React Loadable的介紹用一句話就能夠說明，route-centric code splitting is shit, component-centric splitting is cool as shit.（自行體會吧233333）。

那麼讓咱們進入正題，說到基於路由拆分和基於組件拆分，git庫的readme中給出了圖解：

能夠很直觀的看出來，根據路由拆分代碼的時候還有不少能夠細分的地方，好比某一條路由下包含的某些須要特定操做才展示的ui組件，這種組件沒有必要在父路由加載的時候就跟着加載。

Loadable的本質是一個高階組件，他能夠很容易的以react的組件爲中心對代碼進行分割。那麼如何使用React Loadable呢？

借用官方的例子，咱們分爲3步進行了解，假設咱們有兩個組件，組件MyComponent引入並渲染組件Bar，常規操做以下：

下面作一下昇華，當MyComponent須要渲染Bar的時候再渲染它：

這其實就已經開始複雜了，並且仔細一推敲，好多場景都沒有考慮到，好比import失敗的時候、須要作服務端渲染的時候。

這時，就能夠拿出咱們的Loadable來幫助咱們解決這一難題了：

這樣代碼清晰明瞭，須要考慮的場景loadable已經幫咱們完成了。

Tip：當咱們使用import()配合webpack2+的時候，將會自動進行代碼分割，無需額外的配置。這就意味着當import()、webpack2+和React Loadable在一塊兒玩的時候，咱們只須要儘量的考慮到代碼的拆分點便可。

和常規的拆分操做對比以後，咱們來看一下Loadable爲咱們提供了哪些api：

Loadable：

在渲染模塊以前首先渲染它，他將返回一LoadableComponent(後面講到)：

Loadable.Map：

容許您並行加載多個資源的高階組件，其中loader選項接收一個函數對象，而且須要一個render方法：

Loadable和Loadable.Map的接收的參數：

·loader 傳入須要加載的組件

·loading 加載中或加載失敗時展現的內容，這個選項爲必填項，若是什麼都不想展現則傳入null

·delay 組件展現的延遲時間，此選項將傳遞給組件參數props.pastDelay，默認爲200（單位毫秒）

·timeout 組件加載的等待時間，此選項將傳遞給組件參數props.timeOut，默認關閉。

·render 自定義已加載模塊的呈現的函數，它接受兩個參數：選項loader接收的對象和props。

·webpack 選填，能夠將組件變成「弱」依賴（不會將 module 引入到 bundle）中，當使用babel的時候自動執行。

 

·modules 選填，由要導入模塊的可選路徑組成的數組。

 

LoadableComponent：

這是經過Loadable或Loadable.map返回的組件。

LoadableComponent.preload()：

用於提早加載（預加載）LoadableComponent，下面假設有一個組件，點擊按鈕後展現，當鼠標劃入按鈕上的時候就開始預加載：

LoadableComponent能夠接收的props：

·error 加載失敗，值爲null時表明加載成功，使用案例：

 

·retry 從新加載（重試），使用案例：

 

·timeOut 布爾值，請求超時時傳遞給組件，使用案例：

 

·postDelay 布爾值，到達時間延遲後返回給組件，使用案例：

 

以上參數彙總使用案例：

以上就是我爲你們總結出的React Loadable的功能和用法。

總結一下React Loadable的原理是經過import（）返回的promise對象實現了異步的操做。

即使如此，其實代碼的拆分工做也不是那麼簡單，咱們要確保選擇拆分的位置可以均勻地分割代碼包而不會影響用戶體驗，這也是一大難點。反觀本文開頭給出的對比圖片能夠獲得些許啓發，在基於路由拆分代碼的基礎上進行基於組件拆分是一個不錯的起點。

最後你們能夠在評論區探討一些本身拆分代碼的好的方案、心得或者疑惑，讓咱們一塊兒探討一下吧~

 

 

歡迎你們關注咱們的公衆號

Web前端Talk