React Native 性能优化

• 开发模式 (dev) 下性能较低, 建议在 release 模式下测试性能
• 可使用 __DEV__ 全局变量判断是否处于开发模式

移除 console 打印语句

• babel-plugin-transform-remove-console
• babel-plugin-transform-remove-console 源码

npm install --save-dev babel-plugin-transform-remove-console

.babelrc 文件配置:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

排除 console.error 和 console.warn:

{
  "env": {
    "production": {
      "plugins": [["transform-remove-console", {"exclude": ["error", "warn"]}]]
    }
  }
}

启用 Hermes 引擎

android

根目录下 gradle.properties 配置 hermesEnabled:

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true

检查是否启用 Hermes 引擎:

console.log('[INFO] Using Hermes:', !!global.HermesInternal);

启用新架构

• React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more
• Enable the New Architecture for Apps

React Native 新架构即无桥化 Bridgeless

android

根目录下 gradle.properties 配置 newArchEnabled:

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=true

或配置环境变量 ORG_GRADLE_PROJECT_newArchEnabled=true

启用新架构后可在运行项目时看到如下打印内容 "fabric":true:

INFO

(NOBRIDGE) LOG Bridgeless mode is enabled (NOBRIDGE) LOG Running "rnc" with {"rootTag":11,"initialProps":

懒加载

可懒加载的内容:

• 组件 components
• 路由 route
• 图片 Image
• 字体

组件

require 异步加载

let example = null;
const [shouldRenderExample, setShouldRenderExample] = useState(false);

// 延迟加载
if (shouldRenderExample) {
  example = require('./example').default;
}

React.Lazy

import React, {lazy, Suspense} from 'react';
import {Text, View} from 'react-native';
import {styles} from './styles';

const DynamicComponent = lazy(() => import('./DynamicComponent'));

function App() {
  return (
    <View style={styles.container}>
      <Suspense fallback={() => <Text>Loading ....</Text>}>
        <DynamicComponent />
      </Suspense>
    </View>
  );
}
export default App;

Loadable Components

• Loadable Components

require.context

CDN

使用 CDN (Content Dilivery Network) 内容分发网络加速

打包产物体积优化

• Android Size Analyzer
• 区分不同 CPU Architecture (CPU 架构, 即 abi)
• react-native-bundle-visualizer

ABI

本地构建 Android 应用时, 默认会构建以下四个 ABI:

• arm64-v8a 第 8 代 64 位 ARM 处理器
• armeabi-v7a 第 7 代及以上 32 位 ARM 处理器
• armeabi 第 5 代和第 6 代 32 位 ARM 处理器
• x86_64 64 位 Intel 处理器
• x86 32 位 Intel 处理器

TIP

可在 android/gradle.properties 文件种查看到如下信息:

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

自动确定模拟器或真机 ABI:

# 完整命令
# npm react-native run-android --active-arch-only
npm android --active-arch-only

或自行确定模拟器或真机 ABI, 如使用 react-native-device-info

npm add react-native-device-info

// supportedAbis 支持除 web 以外的 android/iOS/Windows/visionOS 平台
import {supportedAbis} from 'react-native-device-info';

supportedAbis()
  .then(abis => {
    // example abis: ["armeabi-v7a", "armeabi"]
    console.log('Supported Abis:', abis);
  })
  .catch(err => console.log(err));

也可使用 adb 命令:

# 查看受支持的单个 abi, 推荐将其作为安卓打包的目标架构
# 示例输出: armeabi-v7a
adb shell getprop ro.product.cpu.abi

# 查看受支持的 abi 列表
# 示例输出: armeabi-v7a,armeabi
adb shell getprop ro.product.cpu.abilist

# grep 表达式过滤出含 abi 的信息
adb shell getprop | grep abi

adb shell getprop | grep abi

或使用 DevCheck 软件

优化编译速度

ccache

brew install ccache

添加符号链接并指向 ccache:

ln -s $(which ccache) /usr/local/bin/gcc
ln -s $(which ccache) /usr/local/bin/g++
ln -s $(which ccache) /usr/local/bin/cc
ln -s $(which ccache) /usr/local/bin/c++
ln -s $(which ccache) /usr/local/bin/clang
ln -s $(which ccache) /usr/local/bin/clang++

ln -s $(which ccache) /usr/bin/gcc
ln -s $(which ccache) /usr/bin/g++
ln -s $(which ccache) /usr/bin/cc
ln -s $(which ccache) /usr/bin/c++
ln -s $(which ccache) /usr/bin/clang
ln -s $(which ccache) /usr/bin/clang++

::: warn 上述 ccache 配置将影响计算机上运行的所有编译过程, 如无法安装/编译其他软件, 可删除所创建的符号链接:

unlink /usr/local/bin/gcc
unlink /usr/local/bin/g++
unlink /usr/local/bin/cc
unlink /usr/local/bin/c++
unlink /usr/local/bin/clang
unlink /usr/local/bin/clang++

或:

unlink /usr/bin/gcc
unlink /usr/bin/g++
unlink /usr/bin/cc
unlink /usr/bin/c++
unlink /usr/bin/clang
unlink /usr/bin/clang++

上述 unlink 操作可能会提示 Operation not permitted

:::

查看 gcc:

# 输出 /usr/local/bin/gcc 或 /usr/bin/gcc
which gcc

查看缓存命中情况:

ccache -s

清除缓存:

ccache --clear

Contributors

why

Changelog

Last edited 3 days ago

View full history

6e3467e-feat: update

090111d-feat: update

f15a167-feat: update RN

e164f08-feat: update RN