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