React Native - 改善冷启动时间答案

【问题标题】：React Native - Improve cold start timeReact Native - 改善冷启动时间
【发布时间】：2017-02-15 04:12:33
【问题描述】：

我正在做的项目是使用 react native 来创建一个 iOS 应用。

以下是 iPhone 5S 发布构建中的冷启动时间

Pre-main time: 0.52 seconds

App did launch to javascript did load time: 2.12 seconds

JS render time: 0.74 seconds

Total time: 3.34 seconds

最慢的部分是等待 react 库加载 js 包（2.2MB）。加载时间看起来正常吗？如何提高 js 包加载时间？非常感谢。

减小 js 包大小可以缩短从应用程序启动到 javascript 加载的时间。对于一个新的 Hello World 项目，只需要 0.18-0.19 秒（iPhone 5S）。

【问题讨论】：

您是如何衡量这些时间的？我遇到了类似的问题，我想看看启动过程的哪一部分是最慢的
嗨@CarlosJ，如果我没记错的话，我记录了程序（AppDelegate）加载js包之前和之后的时间。您可以按照此stackoverflow.com/a/46830981/632038 记录主前时间

标签： ios react-native

【解决方案1】：

是的，你描述的问题确实存在。作为一种可能的解决方案，您可以使用ram-bundle 格式，metro 捆绑器提供。

在这种情况下，您不会加载整个 js-bundle - 您将只加载启动时需要的部分（在很多应用程序中有很多地方，用户甚至可能看不到，以及此功能允许您仅在需要时加载此类部件）。所以你可以简化你的入口点并且只加载你的包的一小部分。

您可以查看react-native-bundle-splitter。该库与几乎所有流行的导航库很好地集成，并允许您推迟加载特定路线。例如，如果您有一个登录屏幕，您可以在启动时仅加载此屏幕，而所有其他屏幕在后台加载或开始加载它们，只有当用户可以看到它们时。您的复杂应用程序的启动时间几乎与“Hello world”应用程序相同。

【讨论】：

【解决方案2】：

时间是否正常取决于您和您的应用用户 =)

显然，如果减少 js 包的大小可以缩短时间，那么您应该尽最大努力完成它。我想有几个步骤可以帮助你：

首先，DRY：代码加倍确实会增加大小
检查是否使用 npm 包，删除未使用的（也作为未使用的内部模块）
使用第三方工具混淆和缩小捆绑包

还应该这样做以降低初始化复杂度

检查算法的渐近复杂度 - 会导致时间增加
删除未使用的变量、函数和数据 - 这可能是冗余内存使用的原因

我可以建议你不仅尝试影响实际时间，还尝试影响时间感觉。例如，使用动画启动画面

【讨论】：