如何加快 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 秒才能启动。这是从用户点击（打开）应用程序到隐藏启动屏幕（并且第一个应用程序屏幕可见）所需的时间。

如何加快速度是一个非常广泛的话题。这里有两个建议，对我的项目有很大帮助：

1. 兑现您的资产。

   将资产捆绑到二进制文件中将提供最佳的用户体验，因为您的资产将立即可用。您的应用程序无需向 CDN 发出网络请求来获取已发布的资产，而是从本地磁盘获取它们，从而获得更快、更高效的加载体验。

2. 始终首先加载应用程序的缓存版本。

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

不幸的是，截至今天，我们在进一步改善空白应用程序的初始加载时间方面似乎受到了限制。没有真正可靠的方法来知道“检查更新”过程需要多长时间，一般的 React Native 初始化时间，“加载所有 JS”时间。

有一个功能请求用于改善启动时间的工具，如果 Expo 团队在未来随时推出类似的功能，那就太好了。