本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/mUzq4NaBHeF3T-NStLzuRw
作者:peterlmeng
导语
最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景。
项目简介:
狼人杀游戏是多人实时性游戏,对流畅度等性能都有要求。作为大型游戏,无论从代码规模和迭代速度来看,手Q的安装包和版本迭代速度都无法用native来承载这样的游戏。从而React Native成为了比较好的选择。
手Q React Native 简介
在手Q目前使用的React Native 版本是0.15版本。下面的数据分析都是基于手QRN0.15版本进行的分析数据。
问题分析
开发过React Native的同学,大体都对白屏界面有所了解。作为RN原生自带功能,基本上每个使用RN的业务都在优化这一阶段。通过对狼人杀的测试来看,首次从RN启动到渲染,耗时基本有1.7s左右。而这些耗时数据还是在iPhone6s中测试得出,可想低端局的情况可能会更加糟糕。
分析性能
工欲善其事必先利其器,要分析其耗时。还得从源头着手,根据常规做法,都会将React Native打包的js拆分成Base Bundle和业务Bundle。从上图,RN 加载流程来看,加载BaseBundle与业务Bundle的耗时是可以有优化空间的。
优化的方案和大多数人的思路一样,只需在业务启动前预加载BaseBundle与业务Bundle即可达到优化时间的效果。
目前所遇到的瓶颈
在优化的开始,我们可能一直把精力放在BaseBundle中,认为BaseBundle是RN的公共库,体积肯定不小。但是从数据来看,我们的狼人杀业务Bundle已经是1.8MB(纯js代码,不包括资源文件)而BaseBundle只有918KB,已经是两倍的体量。现在还只是狼人杀业务的初期,随着业务的快速迭代,业务Bundle只