背景

起因是在排查公寓找室友bundle過(guò)大問(wèn)題時(shí)，發(fā)現(xiàn)house-middle-sdk體積異常，逐個(gè)刪減引用得出結(jié)論是引用了node-forge庫(kù)導(dǎo)致，通過(guò)這次手動(dòng)排查經(jīng)歷演化出做一個(gè)bundle自動(dòng)化靜態(tài)掃描的想法。

介紹

安裝

npm i house-cli -g

使用

根目錄添加metro.config.js文件

//里面引用全局路徑（這個(gè)后面優(yōu)化一下）
module.exports = require('/Users/haojie/WorkSpace/house-cli/scripts/index.js')

house-explorer

功能點(diǎn)

輸出 bundle總大小、按包統(tǒng)計(jì)模塊大小并顯示百分比、按包輸出所有js文件的module文件

原理

基于metro的Serialization環(huán)節(jié)捕獲到每個(gè)module，然后將其分析。原本打算侵入源碼分析，但難度過(guò)大，因?yàn)樯婕暗絩eact-native-cli以及react-native和metro源碼的調(diào)用，所以最后折中采取在processModuleFilter環(huán)節(jié)分析的做法。缺陷在于目前沒(méi)有做包的依賴庫(kù)分析。

公寓找室友掃描結(jié)果分析

image.png

左側(cè)為公寓數(shù)據(jù)、右側(cè)為找室友數(shù)據(jù)

從分析數(shù)據(jù)來(lái)看總bundle大小相差200kb，業(yè)務(wù)代碼均占比很高基本在40%或以上，把node-forge庫(kù)優(yōu)化后業(yè)務(wù)代碼占比會(huì)更高。后期或可針對(duì)App業(yè)務(wù)代碼做進(jìn)一步數(shù)據(jù)分析。因?yàn)檫@兩個(gè)業(yè)務(wù)上可能存在多個(gè)相似文件，所以存在可優(yōu)化空間。其他占比較大的分別是house-middleware-sdk、mobx、react-navigation、recvclerview、house-middleware-components這些庫(kù)可優(yōu)化空間不大、最多把sdk做成按需引入。