集成react-native-bootsplash后React Native应用启动耗时过长求助

问题描述 #

我在React Native应用中集成react-native-bootsplash库后，应用首次启动耗时显著增加。提交到Google Play商店的发布版本收到预启动报告，显示首次启动耗时达22761ms，同时iOS平台也存在相同问题。未集成该库前应用启动速度正常，希望能找到解决双平台冷启动变慢的方案。

现有配置详情 #

Android端配置 #

MainActivity.java

package com.qadaapp;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Qadaapp";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new MainActivityDelegate(this, getMainComponentName());
  }

  public static class MainActivityDelegate extends ReactActivityDelegate {
    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

    @Override
    protected boolean isConcurrentRootEnabled() {
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }
  }
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this);
    super.onCreate(null);
  }
}

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.qadaapp">

  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

  <uses-permission android:name="com.android.vending.BILLING"/>
  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:usesCleartextTraffic="true" android:theme="@style/BootTheme">
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="qadaapp"/>
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.FacebookActivity" android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name"/>
    <activity android:name="com.facebook.CustomTabActivity" android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="@string/fb_login_protocol_scheme"/>
      </intent-filter>
    </activity>
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
      <meta-data
          android:name="preloaded_fonts"
          android:resource="@array/preloaded_fonts" />
  </application>
</manifest>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>
    <!-- BootTheme should inherit from Theme.SplashScreen -->
    <style name="BootTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>
    
</resources>

build.gradle配置

添加了依赖：

implementation "androidx.core:core-splashscreen:1.0.0"

React Native端（App.js）代码 #

const unsubscribe = auth().onUserChanged(async usr => {
  if (!usr) {
    await _getSlideShows();
    setUser(null);
    return RNBootSplash.hide({fade: true});
  }
  if (usr?.uid) {
    let dbResult = await DB.collection('users').doc(usr?.uid).get();
    setUser(usr);
    if (dbResult?.exists) {
      let dbUser = dbResult.data();
      setUser(dbUser);
    }
    return RNBootSplash.hide({fade: true});
  }
});
return () => unsubscribe();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

问题分析与解决方案 #

核心问题定位 #

启动耗时增加的关键原因是启动屏隐藏逻辑被异步网络操作阻塞：无论是未登录时的_getSlideShows()，还是已登录时的Firestore文档获取，都是异步IO操作，这些操作会延迟启动屏的隐藏时间，导致整体启动时长被大幅拉长。

具体优化步骤 #

1. 优先隐藏启动屏，延后异步操作

修改App.js中的逻辑，先立即隐藏启动屏，再执行网络请求：

const unsubscribe = auth().onUserChanged(async usr => {
  // 优先隐藏启动屏，避免阻塞启动流程
  RNBootSplash.hide({fade: true});
  
  if (!usr) {
    await _getSlideShows();
    setUser(null);
    return;
  }
  if (usr?.uid) {
    let dbResult = await DB.collection('users').doc(usr?.uid).get();
    setUser(usr);
    if (dbResult?.exists) {
      let dbUser = dbResult.data();
      setUser(dbUser);
    }
    return;
  }
});
return () => unsubscribe();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

2. Android端配置优化

• 将androidx.core:core-splashscreen依赖升级到最新稳定版（如1.0.1），修复旧版本可能存在的性能问题
• 确保RNBootSplash.init(this)在super.onCreate(null)之前调用，且之前没有其他耗时操作

3. iOS端优化建议

• 检查iOS端启动配置，避免在启动阶段执行同步网络请求或阻塞主线程的操作
• 使用Xcode的启动时间分析工具（Product > Profile > Launch），定位具体耗时环节
• 确保RNBootSplash初始化后无额外阻塞逻辑

4. 通用启动优化

• 启用Hermes引擎，大幅提升JS加载与解析速度
• 开启JS代码混淆压缩，减小包体积
• 延迟加载非首屏必需的组件和第三方库，避免启动时一次性加载所有资源

内容的提问来源于stack exchange，提问作者Anwer Solangi