拆包是React-Native項目不得不面臨的一個重要技術(shù)門檻害淤。
為什么要拆包腋舌？
bundle文件過大： 一個Helloworld的App送矩，如果使用0.53RN 官方命令react-native bundle打包出來的JSBundle文件大小大約為530KB澄暮，RN依賴模塊本身占了99.9%搅荞。
頁面加載慢： 如果使用熱更新，從網(wǎng)絡(luò)獲取整個包的下載時間很長幽污，每次進入RN頁面都需要執(zhí)行RN基礎(chǔ)模塊的定義嚷辅。
如果只是一個單獨的新APP，純RN的距误，或者只有一兩個業(yè)務(wù)使用簸搞，這點大小算不了什么扁位。
但是對于很多業(yè)務(wù)的公司項目，如果每個業(yè)務(wù)的JSBundle都需要這么大的一個RN框架趁俊，那將是沒必要的域仇。
Facebook官方有沒有解決方案呢？
Facebook的打包工具是metro, metro自帶unbundle命令寺擂，不過暇务，打包結(jié)果不符合預(yù)期；
Android端是將每一個模塊輸出到單個文件并以模塊ID命名怔软；IOS端是將模塊以流形式打到一個文件中垦细；
方案
調(diào)研的方案可以分三類：
1.手動拆分&合并后再加載
使用RN打包工具打包，手動將文件分開分成基礎(chǔ)包A.js, 業(yè)務(wù)包B.js;然后在APP加載該頁面的時候?qū),B兩個文件合并再執(zhí)行挡逼；
優(yōu)點：成本低括改，不需要改打包工具；
缺點：性能沒有提升挚瘟，不能優(yōu)化執(zhí)行時間叹谁，反而會增加翘紊；
2.動態(tài)更新
可以從編譯產(chǎn)物看到require(moduleID)敲茄；這個方案的思路是：編寫一個空的React容器組件，利用DeviceEventEmitter監(jiān)聽一個Native事件讨勤，在需要加載頁面時订框，Native下載將模塊保存下來析苫，以對應(yīng)模塊ID命名，然后通過DeviceEventEmitter對應(yīng)模塊的id發(fā)給React來調(diào)用require(msg.id),比如：
export default class App extends Component {
constructor(){
super();
this.state = {
dynamicModule : null
}
}
componentDidMount(){
DeviceEventEmitter.addListener('LoadBundle',(events) =>{
let moduleId = parseInt(events.moduleID, 10))
let dynamicModule = require(moduleId);
self.setState({ dynamicModule:dynamicModule });
});
}
render() {
const { dynamicModule } = this.state;
if (dynamicModule) {
return React.createElement(dynamicModule, this.props);
} else {
return (
<View><Text>空空的容器</Text></View>
);
}
}
}
但是在編譯前使用require(moduleID)會報錯穿扳，因為編譯前根本就未生成模塊Id衩侥，所以需要改動打包工具。
優(yōu)點：性能好矛物，能優(yōu)化執(zhí)行時間, 加載時只是執(zhí)行了React容器組件的render()方法茫死；
缺點：成本很大，需要修改Naive的RN源碼來重寫require方法履羞，android在unbundle調(diào)用的是assets目錄下峦萎，不能通過網(wǎng)絡(luò)動態(tài)獲取，而且需要改打包工具忆首。
3.動態(tài)執(zhí)行
將bundle分為兩部分爱榔，在內(nèi)存中先執(zhí)行基礎(chǔ)模塊的定義，然后再需要打開頁面時糙及，執(zhí)行該頁面的業(yè)務(wù)模塊文件详幽；
優(yōu)點：性能好，能優(yōu)化執(zhí)行時間；
缺點：成本大, 需要改Native加載方式唇聘，打包工具也許修改版姑。
Rabbit-bundler是按照此方案實現(xiàn)的打包工具。
具體請參考：Rabbit-bundler介紹
