RN bundle自动化静态扫描

背景

起因是在排查公寓找室友bundle过大问题时，发现house-middle-sdk体积异常，逐个删减引用得出结论是引用了node-forge库导致，通过这次手动排查经历演化出做一个bundle自动化静态扫描的想法。

介绍

安装

npm i house-cli -g

使用

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

//里面引用全局路径（这个后面优化一下）
module.exports = require('/Users/haojie/WorkSpace/house-cli/scripts/index.js')

house-explorer

功能点

输出 bundle总大小、按包统计模块大小并显示百分比、按包输出所有js文件的module文件

原理

基于metro的Serialization环节捕获到每个module，然后将其分析。原本打算侵入源码分析，但难度过大，因为涉及到react-native-cli以及react-native和metro源码的调用，所以最后折中采取在processModuleFilter环节分析的做法。缺陷在于目前没有做包的依赖库分析。

公寓找室友扫描结果分析

image.png

左侧为公寓数据、右侧为找室友数据

从分析数据来看总bundle大小相差200kb，业务代码均占比很高基本在40%或以上，把node-forge库优化后业务代码占比会更高。后期或可针对App业务代码做进一步数据分析。因为这两个业务上可能存在多个相似文件，所以存在可优化空间。其他占比较大的分别是house-middleware-sdk、mobx、react-navigation、recvclerview、house-middleware-components这些库可优化空间不大、最多把sdk做成按需引入。