[ReactNative翻译]如何为 React Native 应用程序挑选合适的外部 JavaScript 库

本文摘自《React Native 优化终极指南》。它重点介绍了为下一个 React Native 项目选择外部库的注意事项。

为何重要？

外部库可能是影响 React Native 应用程序大小和速度的最重要因素之一。这就是为什么您在为项目选择外部库时要格外小心的原因。在这里，您将了解到如何找到既具有所有所需功能，又不会降低应用程序性能的库。

在以《React Native 优化终极指南》为基础的其他博文中，我们将讨论以下与通过了解 React Native 实现细节来提高性能相关的主题：

请务必查看这些内容。现在，让我们回到为 React Native 项目选择外部 JavaScript 库的来龙去脉上来。

为什么在选择外部库之前要三思而后行？

JavaScript 开发就像是用更小的模块来组装应用程序。在某种程度上，它与构建 React Native 应用程序非常相似。您不需要从头开始创建 React 组件，而是需要寻找 JavaScript 库来帮助您实现自己的想法。JavaScript 生态系统提倡这种开发方法，并鼓励围绕可重用的小型模块构建应用程序。

这种生态系统有很多优点，但也有一些严重的缺点。其中之一就是开发人员很难从支持相同用例的多个库中做出选择。

为 React Native 应用程序选择 JavaScript 库时应考虑的因素

在为下一个项目选择 JavaScript 库时，开发人员通常会研究一些指标，以了解该库是否健康且维护良好，例如 Github 星级、问题数量、贡献者和 PR。

但他们往往忽略了库的规模、支持功能的数量和外部依赖性。他们认为，既然 React Native 完全是关于 JavaScript 和现有工具链的，那么他们在工作中就会沿用制作 Web 应用程序时所熟悉的限制条件和最佳实践。

但事实并非如此，因为移动开发在本质上是不同的，有自己的一套规则。例如，在网络应用程序中，资产的大小至关重要，而在 React Native 中，资产位于文件系统中，这一点并不同样重要。

关键区别在于移动设备的性能以及用于捆绑和编译应用程序的工具。

虽然您对设备的限制无能为力，但您可以控制 JavaScript 代码。一般来说，代码越少，打开速度越快。而影响代码整体大小的最重要因素之一就是库。

复杂的库如何影响应用程序的速度

与完全原生的应用程序不同，React Native 应用程序包含一个需要加载到内存中的 JavaScript 捆绑程序。然后由 JavaScript 虚拟机进行解析和执行。

在此过程中，应用程序仍处于加载状态。我们通常用 TTI（交互时间）来描述这一过程。它是指从应用程序抽屉中选择图标到完全交互之间的时间，单位是毫秒（希望如此）。

遗憾的是，Metro（默认的 React Native 捆绑程序）目前还不支持树形晃动。这意味着，你从 npm 中提取并导入到项目中的所有代码都将出现在生产捆绑包中，并加载到内存中进行解析。值得注意的是，Hermes 引擎并非如此，它只会将必要的字节码自动分页到内存中。

如何分析代码包大小

掌握捆绑包的大小非常重要。我们可以使用 react-native-bundle-visualizer 在图形用户界面的帮助下分析捆绑包。我们可以获得捆绑包中添加的任何库的详细信息，从而决定是否值得保留或删除该库。该软件包使用应用程序捆绑包生成以下形式的输出：

更有选择性地使用小型专业库

克服这一问题的最简单方法是在项目前期采用正确的架构策略。

如果您要使用一个复杂的库，请检查是否有更小的替代库可以实现您所需的功能。

这里有一个例子：最常见的操作之一就是操作日期。假设您要计算经过的时间。与其调用整个 moment.js 库（67.9 Kb）来解析日期本身，还不如这样做：

import moment from 'moment' const date = moment("12-25-1995", "MM-DD-YYYY");

使用 moment.js 解析日期

你可以使用 day.js（只有 2Kb），它的体积要小得多，而且只提供你想要的功能。

import dayjs from 'dayjs'
const date = dayjs("12-25-1995", "MM-DD-YYYY");

使用 day.js 解析日期

如果没有其他选择，经验法则是检查是否可以导入库中较小的部分。

例如，许多库（如 lodash）都已将自身拆分为较小的实用程序集，并支持无法消除死代码的环境。

比方说，你想使用 lodash map。而不是像这里介绍的那样导入整个库：

import { map } from 'lodash';
const square = x => x * x;
map([4, 8], square);

通过导入整个库来使用 lodash 映射

你可以只导入一个软件包：

import map from 'lodash/map';
const square = x => x * x;
map([4, 8], square);

通过只导入一个函数来使用 lodash 映射

因此，你可以从作为 lodash 软件包一部分的实用程序中获益，而无需将它们全部拉入应用程序捆绑包中。

如果你想持续了解依赖项的大小影响，我们强烈推荐你使用导入成本 VSCode 扩展。或者使用 Bundlephobia 网站。

更快的加载速度意味着更好的业务成果

移动是一个竞争异常激烈的环境，许多应用程序的设计目的大同小异，都在争夺同样的客户。更快的启动时间、更流畅的交互以及整体外观和感觉可能是您在竞争中脱颖而出的唯一途径。

根据 Akamai 关于在线零售性能的报告，移动加载时间只要延迟一秒钟，转化率就会降低 20%。这就是为什么你不应该低估选择一套正确库的重要性。对第三方依赖性进行更多的选择，起初似乎无关紧要。但随着时间的推移，所有节省下来的毫秒都将带来巨大的收益。

您是否正在为项目选择合适的工具集而苦恼？请相信我们的 React Native 开发公司，他们会将技术与您的业务目标相匹配！