如何加快 React native 和 Expo 应用程序的初始启动应用程序

Question

我创建了一个应用程序并添加了启动屏幕。在 Android 模拟器上加载应用程序需要 1 秒。但是在商店中发布应用程序后，加载需要 4 秒。

对于这样一个简单的应用程序来说，这很烦人。

我还以为是_loadResourcesAsync函数加载图片的问题。因此我注释掉了这些行，但没有任何改变。

任何加速我的应用程序启动的建议。

在这里你可以找到我的 app.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset } from 'expo';
import AppNavigator from './navigation/AppNavigator';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoadingComplete: false,
    };
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        // require('./assets/images/big_bottle.png'),
        // require('./assets/images/bottle.png'),
        // require('./assets/images/coffee.png'),
        // require('./assets/images/juice.png'),
        // require('./assets/images/menu.png'),
        // require('./assets/images/tea.png'),
        // require('./assets/images/water-glass.png'),
      ]),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Answer 1

根据我的经验，混合应用通常启动速度较慢。

根据我的测试，根据设备性能，即使是完全空白的 Expo 应用程序也可能需要 1-4 秒才能启动。这是从用户点击（打开）应用程序到启动画面隐藏（第一个应用程序屏幕可见）所花费的时间。

您可以做些什么来加快它的速度是一个非常广泛的话题。这里有两个建议，对我的一个项目有很大帮助：

兑现您的资产。

Bundling assets into your binary 将提供最佳用户体验，因为您的资产将立即可用。您的应用程序无需向 CDN 发出网络请求来获取您发布的资产，而是从本地磁盘获取它们，从而获得更快、更高效的加载体验。
始终首先加载应用的缓存版本。

您可以将 app.json 中的“更新”部分配置为始终首先从应用的缓存版本 (fallbackToCacheTimeout: 0) 开始，然后继续尝试在后台获取更新（位于哪一点它将被保存到缓存中以供下一次应用加载。

不幸的是，截至今天，我们在进一步改善空白应用程序的初始加载时间方面似乎有点受限。没有真正可靠的方法来知道 'check for updates' 过程需要多长时间，一般的 React Native 初始化时间，'load all the JS' 时间。

tools for improving the startup time 有一个功能请求，如果 Expo 团队在未来任何时候引入类似的东西，那就太好了。

如何加快 React native 和 Expo 应用程序的初始启动应用程序

How to speed up initial launch app of React native and Expo app

android

splash-screen

react-native

expo