Question

我已经创建了一个应用程序并添加了屏幕显示。在Android Emulator上加载该应用程序需要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) 开始，然后继续尝试在后台获取更新（此时它将保存到缓存中以备下次应用加载）。

不幸的是，截至今天，我们似乎只能做些什么来进一步改善空白应用程序的初始加载时间。没有真正可靠的方法来了解“检查更新”过程需要多长时间、一般的 React Native 初始化时间、“加载所有 JS”时间。

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

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

1 个答案: