https://github.com/sbdavid/flipper-plugin-launchperformancetree-client

Last synced: 3 months ago
JSON representation

README

# flipper-plugin-launchperformance-tree

launchperformance-tree是一个Flipper插件，它使用树形结构展现Js模块的加载速度和依赖关系。

## 1. 主要功能
- 查找加速速度缓慢的js模块，通过依次展开子树精确定位大型js模块的名称
- 你可以点击 `+` 展开模块依赖书，并通过不同的颜色判断模块加载速度是否有问题

## 2. 建议选择大于5ms的过滤选项，以提高查找效率

## 3. 数据说明
### 3.1 时长
一般包括js文件载入内存、jsCore解释js代码、jsCore执行代码中的define方法得到模块的基础信息，运行require方法得到模块的导出对象。JS模块存在相互依赖关系，如果模块A依赖模块B，那么模块A的加载时长中包含了B的加载时长。

### 3.2 灰色模块
baseBundle中的模块，这些模块在线上环境会做预加载，所以不会占用首屏启动的时长，故不需要优化。

### 3.3 红色模块
加载时长超过20ms，表示很可能存在问题。但是项目入口文件的加载时长通常大于20ms，不需要过于担心。

### 3.4 蓝色模块
加载时长超过5ms

### 3.5 绿色模块
加载时长小于5ms

## 4. 问题

### 4.1 为什么父模块的时长不等于子模块时长直和
有些模块使用懒加载模式，父模块的引用包含了懒加载模块的时长，但是被懒加载的子模块无法在父模块中显示。
但是此时时间计算没有错误，只是无法显示出子模块，可以通过react-native-launchperformace-log插件进一步排查。