為什么要拆包
React-Native 開發完成之后,需要調用 react-native bundle 命令構建出最終包,發布上線。但是構建出結果包之后發現,即使是一個不帶任何邏輯業務的包也有 800k+, 導致啟動時包加載耗時很長,會有一段時間的白屏,體驗非常不好。
拆包是什么
分析 bundle 文件,可以看到里面大部分是 react-native 自帶的原生模塊。那我們很容易想到,這部分是任何一個 bundle 都會攜帶的重復內容,可不可以把這部分內容單獨抽出來行程一個固定的 common 包,然后不同的業務部分形成一個個的 business 包。兩種類型包分別下發到 app,在運行時再合并到一塊,或者在進入模塊之前把 common 加載起來,再選擇性的加載 business 包,這樣應該可以極大降低啟動耗時。
效果對比
上了拆包和預加載機制之后,啟動耗時從平均 400ms 下降到平均 40ms,視覺上基本感受不到白屏。
目錄
拆包問題將分為三部份介紹: