1、分包

  觀察現在一些接入React native的大廠，如菜鳥、大搜車、去哪兒，都將react native 的jsbundle分為幾個包來使用。作用是啥？為什麼要這麼折騰？像去哪兒、騰訊或者攜程都發布了一些文章來闡述分包的原因了，不瞭解的可以去搜索看看。我這邊只總結下：react native原生打出來的包都只有一個jsbundle(除了rambundle)，裡面包含了所有你寫程式碼和react native程式碼和你依賴的第三方庫程式碼(當然還有polyfill)，如果是純rn程式碼這倒沒什麼差別，但一般大廠都是原生應用內接入react native頁面，而且一個應用內有許多不同業務，很可能是不同部門開發的，這樣一個應用內就有許許多多jsbundle，如果不分包，那就有許許多多的重複的react native程式碼和第三方庫，所以一般做法都是將重複的react native程式碼和第三方庫打包成一個基礎包，然後各個業務在基礎包的js環境下執行，這樣做可以減少記憶體開銷且熱更新的時候只需要下載幾十KB的業務包，要知道react native程式碼和第三方庫壓縮前一般都能上1M多(依賴的多的可能有2M多)。

2、分包的方法

網上有許多分包的方法，我這邊列舉並列舉其優缺點

簡介：攜程大廠推出，穩定可靠，針對react native0.44時代的版本

優點：重寫了react native自帶的打包工具，重寫就是為了分包，為分包而生的專案，肯定可靠

缺點：2 years ago，只適合rn老版本使用者了，現在都8012了，0.5以上的rn版本全部撲街

2、自己修改打包程式碼

簡介：現在很多教程都是讓你去修改打包的原始碼，在裡面判斷分包，就是教程有的是幾年前了

優點：如果自己很懂打包原始碼，這個做法靈活，定製化強，100%沒問題

缺點：現在沒人敢說自己完全看得懂打包原始碼，網上的教程在新版本容易撲街

3、diff patch

簡介：大致的做法就是先打個正常的完整的jsbundle，然後再打個只包含了基礎引用(react和第三方module)的基礎包，比對一下patch，得出業務包，這樣基礎包和業務包都有了

優點：簡單暴力，如果只是想簡單做下分包的可以嘗試下

缺點：1、不利於維護，由於module後面都是rn生成數字，依賴變了數字也變，導致基礎包變了所有包都需要變2、圖片沒法分包，有的第三方庫是有圖片的，這個方法只處理jsbundle不處理圖片

現在都8012了我們來看看0.57版本的react native如何分包：

metro bundle

這個就是現在rn版本使用的打包工具，是由之前的rn打包程式碼中抽取出來成為一個單獨的專案，metro更新迅速，一個月一個樣，現在我覺得已經比較完善了，可以拿出來溜溜

全新的做法

其實react native在0.5時代就已經引入了metro bundle，但由於其還是在不斷完善，無法完成分包大任，現在0.57已經可以完全支援分包了

配置是不是眼花繚亂，分包只要用到兩個配置：createModuleIdFactory和processModuleFilter

createModuleIdFactory函式傳入的是你要打包的module檔案的絕對路徑返回的是這個module的id

processModuleFilter函式傳入的是module資訊，返回是boolean值，如果是false就過濾不打包

做法就很清晰了，配置createModuleIdFactory讓其每次打包都module們使用固定的id(路徑相關)，

配置processModuleFilter過濾基礎包打出業務包

具體的配置看我的github吧

載入多bundle

現在網上流傳的一些方法都還是demo級別的方法，我的做法是儘量與react native相容

android是直接重寫ReactActivity，只在執行module前載入了業務包檔案，這樣可以讓程式碼有完整的生命週期

iOS監聽基礎包載入成功的訊息，基礎包載入後再載入業務包，順序和時機都是完美