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做成按需引入。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容