RN拆包工具是為了解決RN產(chǎn)出的bundler包文件過大問題的打包工具下梢；可以按需將模塊按照基礎(chǔ)&業(yè)務(wù)生成兩個(gè)文件歧寺。
思路
基于RN官方的打包工具使用unbundle platform android已經(jīng)可以拆包拂共，不過是一個(gè)模塊一個(gè)文件雕欺，文件數(shù)量過多聋丝。
#RN unbundle android 的使用 example：
react-native unbundle --platform android --dev true --entry-file index.js --bundle-output dist/metro_android_bundle.js
基礎(chǔ)此命令進(jìn)行修改编振，將多個(gè)單獨(dú)的模塊文件按照“需要”合并到一起缀辩；
嘗試按照注釋或者模塊屬性，將模塊劃分到base.js bussiness.js中踪央。
分析
我們先從幾個(gè)角度了解一下RN的打包工具：
unbundle android 與 unbundle ios 的區(qū)別
ios是流文件, android是生成一個(gè)基礎(chǔ)文件,
模塊文件夾js-modules臀玄，文件夾中包含以react-native為首的組件，包括業(yè)務(wù)組件
unbundle android 與 bundle android 的區(qū)別
unbundle 文件跟bundle文件開始都一摸一樣畅蹂，
都是定義模塊化方法和bable配置健无，
但是在unbundle在定義模塊的時(shí)候截止了，將React-native等模塊的定義單獨(dú)拿到了js-modules文件夾中以ID命名液斜，一個(gè)模塊一個(gè)文件累贤，
調(diào)用了require(11); 11.js中寫的是入口文件index.js _reactNative.AppRegistry.registerComponent
RN模塊化
打包之后JSBundle文件的結(jié)構(gòu)，基本分為3部分 頭部：全局定義少漆，主要是define臼膏，require等全局模塊的定義； 中間：模塊定義示损，RN框架和業(yè)務(wù)的各個(gè)模塊定義渗磅； 尾部：引擎初始化和入口函數(shù)執(zhí)行；
__d是RN自定義的define检访，符合CommonJS規(guī)范始鱼，__d后面的數(shù)字是模塊的id，是在RN打包過程中脆贵，解析依賴關(guān)系医清，自增長生成的。
如果所有業(yè)務(wù)代碼丹禀，都遵照一個(gè)規(guī)則：入口JS文件首先require的都是react/react-native, 則打包生成的JSBundle里面react/react-native相關(guān)的模塊id都是固定的状勤。
打包產(chǎn)物：Bunlde類
RN的bundle在生成文件之前是一個(gè)對象，它的定義就在：metro/src/Bundler/index.js中双泪。讓我們看下它打印出來的結(jié)構(gòu)：
const bundle = {
"groups": {},
"startupModules": [{...},{...}],
"lazyModules": [
{
"id": 11,
"code": "__d(function (global, _require, module, exports, _dependencyMap) {\n var _reactNative = _require(_dependencyMap[0], \"react-native\");\n\n var _App = _require(_dependencyMap[1], \"./App\");\n\n var _App2 = babelHelpers.interopRequireDefault(_App);\n\n _reactNative.AppRegistry.registerComponent('divider', function () {\n return _App2.default;\n });\n},11,[12,337],\"index.js\");",
"map": {
"version": 3,
"file": "/Users/pengzou/workspace/exercise/rn/divider/index.js",
"sources": [
"/Users/pengzou/workspace/exercise/rn/divider/index.js"
],
"sourcesContent": [
"import { AppRegistry } from 'react-native';\nimport App from './App';\n\nAppRegistry.registerComponent('divider', () => App);\n"
],
"names": [
"AppRegistry",
"registerComponent",
"App"
],
"mappings": ";AAAA;;AACA;;;;AAEAA,2BAAYC,iBAAZ,CAA8B,SAA9B,EAAyC;AAAA,WAAMC,aAAN;AAAA,GAAzC"
},
"name": "index.js",
"sourcePath": "/Users/pengzou/workspace/exercise/rn/divider/index.js",
"source": "import { AppRegistry } from 'react-native';\nimport App from './App';\n\nAppRegistry.registerComponent('divider', () => App);\n",
"type": "module"
},{...}]
};
其中startupModules, RN基礎(chǔ)模塊持搜，模塊化方法定義等;lazyModules是react，入口焙矛，業(yè)務(wù)等模塊葫盼；
每個(gè)模塊對象的重要屬性：id:模塊ID, code:代碼，name:文件名等等村斟；
RN的unbundle命令A(yù)ndroid端是將startupModules模塊合并到一個(gè)文件并在最后一行增加對入口的調(diào)用贫导；將lazyModules數(shù)組中的模塊單獨(dú)輸出到單獨(dú)文件并以模塊id命名保存到j(luò)s-modules文件夾下抛猫。
實(shí)踐
RN的官方打包工具是metro. 讓我們在node_modules/metro 直接修改代碼調(diào)試:
- 使用unbundle 將模塊路徑包含node_modules字符串的模塊視為RN的模塊，將這些模塊從lazyModules移入startupModules;
- 將調(diào)用index.js的require(id),即原startupModules中最后一句孩灯，提取出來闺金；
- 將lazyModules多個(gè)模塊合并成一個(gè)文件；
- 將require(id)填入lazy.bundle;
- 將require(InitializeCore模塊Id)填入lazy.bundle;
- 使得platform ios走Android的unbundle
遇到的問題&解決辦法
metro代碼庫中flow文件是什么峰档？
flow是facebook公司的代碼規(guī)范败匹，需要將flow轉(zhuǎn)移js才可以正常運(yùn)行。
在Babel中配置使用Flow需要創(chuàng)建一個(gè)配置文件.babelrc，并配置插件transform-flow-strip-types，讓其它人也可能使用它：
"presets": ["es2015"],
"plugins": [
"transform-flow-strip-types",
]
}
然后你可以告訴Babel你的輸入文件夾src和輸出文件夾lib：
`babel src/ -d lib`
通常悄泥，你會將lib目錄添加到你的.gitignore中，因?yàn)槲覀儾幌胩峤晃覀兙幾g過后的代碼到Git上槽棍。
RN打包的核心文件
// metro unbundle
metro/src/shared/output/unbundle/index.js
// metro unbundle android
metro/src/shared/output/unbundle/as-assets.js
// rn local-cli
react-native/local-cli/bundle/unbundle.js
node調(diào)試，內(nèi)容很多的對象如何打犹俊炼七？
//使用格式化輸出對象
console.log(JSON.stringify(object,null,2));
//或使用fs寫入文件中；
#首先npm上注冊賬號怎爵，別忘了去郵箱驗(yàn)證特石，而且126郵箱不行，qq可以鳖链。
# 不能使用鏡像姆蘸，切換到原始地址：
npm config set registry http://registry.npmjs.org
npm adduser
npm init
npm publish
#更新
npm version <新的版本號>
npm publish
#發(fā)布完成之后,如果還想回到之前的cnpm,使用下面的命令
npm config set registry https://registry.npm.taobao.org
此打包工具實(shí)踐的方案，需要Native對RN做相應(yīng)的修改芙委，具體內(nèi)容請參考：
本文的主旨是介紹拆包工具的拆包思想逞敷，而是希望將這個(gè)思路講清楚幫助讀者優(yōu)化react-native項(xiàng)目。
2018.9.5更新：由于rabbit工具已經(jīng)改造并應(yīng)用于作者公司內(nèi)部灌侣，所以github已經(jīng)刪除推捐，并且在npm上將其廢棄，文章內(nèi)相關(guān)信息已經(jīng)刪除侧啼，保留拆包的思路牛柒。
