优化 JavaScript 加载
解析和运行 JavaScript 代码需要内存和时间。因此,随着应用规模的增长,通常有必要延迟加载代码,直到首次需要时再加载。React Native 默认自带一些标准优化,你也可以在自己的代码中采用一些技术来帮助 React 更高效地加载你的应用。此外,还有一些高级自动优化(伴随其自身的权衡),它们适用于超大型应用。
推荐:使用 Hermes
Hermes 是新 React Native 应用的默认引擎,并且针对高效的代码加载进行了高度优化。在发布构建中,JavaScript 代码会提前完全编译为字节码。字节码按需加载到内存中,无需像普通 JavaScript 那样进行解析。
在此处阅读更多关于在 React Native 中使用 Hermes 的信息此处。
推荐:懒加载大型组件
如果一个拥有大量代码/依赖的组件在应用初次渲染时不太可能被使用,你可以使用 React 的 lazy
API 来延迟加载其代码,直到它首次被渲染。通常,你应该考虑在应用中懒加载屏幕级别的组件,这样向应用添加新屏幕时就不会增加其启动时间。
在 React 文档中阅读更多关于使用 Suspense 懒加载组件的信息,包括代码示例。
提示:避免模块副作用
如果你的组件模块(或其依赖)具有副作用,例如修改全局变量或在组件外部订阅事件,懒加载组件可能会改变你应用的行为。React 应用中的大多数模块不应有任何副作用。
import Logger from './utils/Logger';
// 🚩 🚩 🚩 Side effect! This must be executed before React can even begin to
// render the SplashScreen component, and can unexpectedly break code elsewhere
// in your app if you later decide to lazy-load SplashScreen.
global.logger = new Logger();
export function SplashScreen() {
// ...
}
进阶:内联调用 require
有时你可能希望延迟加载某些代码直到首次使用它们,而不使用 lazy
或异步的 import()
。你可以通过在文件顶部使用静态 import
的地方改用 require()
函数来实现这一点。
import {Component} from 'react';
import {Text} from 'react-native';
// ... import some very expensive modules
export default function VeryExpensive() {
// ... lots and lots of rendering logic
return <Text>Very Expensive Component</Text>;
}
import {useCallback, useState} from 'react';
import {TouchableOpacity, View, Text} from 'react-native';
// Usually we would write a static import:
// import VeryExpensive from './VeryExpensive';
let VeryExpensive = null;
export default function Optimize() {
const [needsExpensive, setNeedsExpensive] = useState(false);
const didPress = useCallback(() => {
if (VeryExpensive == null) {
VeryExpensive = require('./VeryExpensive').default;
}
setNeedsExpensive(true);
}, []);
return (
<View style={{marginTop: 20}}>
<TouchableOpacity onPress={didPress}>
<Text>Load</Text>
</TouchableOpacity>
{needsExpensive ? <VeryExpensive /> : null}
</View>
);
}
进阶:自动内联 require
调用
如果你使用 React Native CLI 构建应用,require
调用(而非 import
)将自动为你内联,无论是在你的代码中还是在你使用的任何第三方包(node_modules
)中。
import {useCallback, useState} from 'react';
import {TouchableOpacity, View, Text} from 'react-native';
// This top-level require call will be evaluated lazily as part of the component below.
const VeryExpensive = require('./VeryExpensive').default;
export default function Optimize() {
const [needsExpensive, setNeedsExpensive] = useState(false);
const didPress = useCallback(() => {
setNeedsExpensive(true);
}, []);
return (
<View style={{marginTop: 20}}>
<TouchableOpacity onPress={didPress}>
<Text>Load</Text>
</TouchableOpacity>
{needsExpensive ? <VeryExpensive /> : null}
</View>
);
}
一些 React Native 框架会禁用此行为。特别是,在 Expo 项目中,require
调用默认不被内联。你可以通过编辑项目的 Metro 配置并在 getTransformOptions
中设置 inlineRequires: true
来启用此优化。
内联 require
的陷阱
内联 require
调用会改变模块的评估顺序,甚至可能导致某些模块永远不会被评估。这通常可以自动安全地进行,因为 JavaScript 模块通常被设计为无副作用。
如果你的某个模块确实有副作用——例如,如果它初始化了某个日志机制,或修补了代码其余部分使用的全局 API——那么你可能会看到意想不到的行为甚至崩溃。在这些情况下,你可能希望将某些模块排除在此优化之外,或完全禁用它。
要禁用所有 require
调用的自动内联:
更新你的 metro.config.js
文件,将 inlineRequires
转换器选项设置为 false
module.exports = {
transformer: {
async getTransformOptions() {
return {
transform: {
inlineRequires: false,
},
};
},
},
};
要仅将某些模块排除在 require
内联之外:
有两个相关的转换器选项:inlineRequires.blockList
和 nonInlinedRequires
。请参阅代码片段以获取如何使用每个选项的示例。
module.exports = {
transformer: {
async getTransformOptions() {
return {
transform: {
inlineRequires: {
blockList: {
// require() calls in `DoNotInlineHere.js` will not be inlined.
[require.resolve('./src/DoNotInlineHere.js')]: true,
// require() calls anywhere else will be inlined, unless they
// match any entry nonInlinedRequires (see below).
},
},
nonInlinedRequires: [
// require('react') calls will not be inlined anywhere
'react',
],
},
};
},
},
};
请参阅 Metro 中 getTransformOptions
的文档,了解有关设置和微调内联 require
的更多详细信息。
进阶:使用随机访问模块包(非 Hermes)
使用 Hermes 时不支持。Hermes 字节码与 RAM bundle 格式不兼容,但在所有使用场景中都能提供相同(或更好)的性能。
随机访问模块包(也称为 RAM 包)与上述技术结合使用,以限制需要解析和加载到内存中的 JavaScript 代码量。每个模块都作为独立的字符串(或文件)存储,仅在模块需要执行时才进行解析。
RAM 包可以物理地拆分为单独的文件,或者它们可以使用索引格式,该格式包含单个文件中多个模块的查找表。
- Android
- iOS
在 Android 上,通过编辑你的 android/app/build.gradle
文件来启用 RAM 格式。在 apply from: "../../node_modules/react-native/react.gradle"
行之前,添加或修改 project.ext.react
块
project.ext.react = [
bundleCommand: "ram-bundle",
]
如果你想在 Android 上使用单个索引文件,请使用以下行
project.ext.react = [
bundleCommand: "ram-bundle",
extraPackagerArgs: ["--indexed-ram-bundle"]
]
在 iOS 上,RAM 包总是索引的(即单个文件)。
通过编辑 Xcode 中的“Bundle React Native code and images”构建阶段来启用 RAM 格式。在 ../node_modules/react-native/scripts/react-native-xcode.sh
之前添加 export BUNDLE_COMMAND="ram-bundle"
export BUNDLE_COMMAND="ram-bundle"
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
请参阅 Metro 中 getTransformOptions
的文档,了解有关设置和微调 RAM 包构建的更多详细信息。