[TOC]

概述

文章参考：https://cloud.tencent.com/developer/article/1005415

本文主要介绍react-native通用化建设以及对react-native项目进行性能优化的方案，总体来讲主要围绕以下几个方面展开：

  • React Native通用化建设
  • React Native bundle本地分包
  • React Native项目线上性能分析
  • React Native项目首屏加速和性能优化

React Native通用化建设

React Native通用化建设主要做了一下几个方面的事情：

react-native线上离线包优化机制

为了实现React-Native线上项目react-native版本与h5版本的自由切换，同时合理地管理好不同项目不同版本的react-native离线包与h5离线包，我们的方案是将h5离线包和react-native bundle文件打在同一个离线包中(放在同一个bid号的离线包中)。

若后台url地址下发中携带md=rn字段，同时离线包中可以检测到react-native bundle文件并且app版本号符合react-native离线包中所配置的离线包生效所要求的app版本范围，则优先加载项目react-native版本。若不满足上诉几点要求，我们则优先加载react-native bundle本地文件或直接走项目h5线上资源。

image

从这张图中我们可以看出，RN加载速度最大的瓶颈其实在于图中绿色的区块JS init+Require，这块时间也就是JSBundle的执行时间；同时若多个项目同时上线，多个业务却不共用基础模块，jsbundle文件会越来越大，app的离线包文件负荷也会越来越大。

基于以上提出的两个问题，我们的解决方案是:react-native bundle本地分包策略