Expo 和 React-Native 在开发和生产模式下的资产下载机制是什么？

Question

我对 Expo 和 React-Native 的机制以及它们如何下载资产感到困惑。

我知道的信息是，一旦您构建了代码，expo 就会准备一个包，其中包含 javascript（编译代码）和资产。

在调试会话期间，该包作为一个整体首先由 expo 客户端下载，然后应用程序启动。这意味着应用程序启动后，"import"代码中的所有资产都应该就位。

另一方面，当我运行下面的原子测试代码时，这是完全相反的。加载这些资产需要时间，就好像它们是 "lazy loaded".

所以我的问题是；与行为发展模式有关还是在生产模式下下载图像仍然需要时间？

如果生产模式的行为相同，那么它将从哪里下载资产？
如果生产模式与开发模式不同，为什么开发模式的行为会有所不同？

import * as React from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import Test0Img from './assets/test0.gif';
import Test1Img from './assets/test1.gif';

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

  render() {
    return (
      <View style={styles.container}>
        <Text></Text>
        <Text></Text>
        <Button
          onPress={() => {
            let l_newImageIndex = (this.state.imageIndex + 1) % 2;
            this.setState({ imageIndex: l_newImageIndex });
          }}
          title="Click to Change Image"
        />
        <Image
          source={this.state.imageIndex === 1 ? Test0Img : Test1Img}
          style={{
            width: '100%',
            height: '100%',
            resizeMode: 'contain',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

代码可见此小吃：https://snack.expo.io/@mehmetkaplan/assetdownloadtest

如果您运行在您的手机中使用此代码，您很可能会发现动画 gif 不容易更改。但是如果你通过网络运行它改变得更快。

Expo 文档指出 here：

For images that saved to the local filesytem, use Asset.fromModule(image).downloadAsync() to download and cache the image. There is also a loadAsync() helper method to cache a batch of assets.

这也与上面的问题有关，如果图像在本地文件系统中，为什么我们需要缓存？

同样的问题也已添加到 Expo 论坛中，可以看到 here。链接两者以便未来的访问者可以找到任何可能的答案。

Answer 1

对于后代，这里是 Expo 工程师在 Expo 论坛上发布的答案：

During development in the Expo client, the images will be downloaded from your local environment. This will take longer due to the all the extra processes that run during Development Mode such as validation checks, remote debugging, hot reloading if enabled, etc. You can read more about this here: https://docs.expo.io/versions/v34.0.0/workflow/development-mode/

When running a published project within the Expo Client, it will fetch your assets from the CDN (CloudFront) in which case you’ll want to make use of the AppLoading module to pre-fetch the assets and only hide the splash screen after all assets have been loaded into memory.

When building a standalone application, you have the option to bundle your assets into the binary (which most should use unless they have an abnormal amount of assets or assets with heavy file sizes) that will result in the assets being loaded into memory much faster since they will be fetched from the local disk rather than making a network request to the CDN.

Expo 和 React-Native 在开发和生产模式下的资产下载机制是什么？

What are the asset download mechanics of Expo and React-Native during development and production mode?

react-native

expo

metro-bundler