本文档于 2022 年 8 月存档,不会收到任何进一步更新。请改用 EAS 更新。了解更多
¥This doc was archived in August 2022 and will not receive any further updates. Please use EAS Update instead. Learn more
¥What's in an update
Expo 应用的更新包括 JavaScript、清单、图片以及兼容的 Expo 客户端应用(例如 Expo Go 和生产应用)可以下载和运行的其他资源。
¥An update for an Expo app comprises the JavaScript, manifest, images, and other assets that a compatible Expo client app, such as Expo Go and production apps, can download and run.
在 Android 和 iOS 上,你提交到应用商店的独立应用是运行更新的客户端应用的示例。在网络上,网络浏览器是运行更新的客户端应用。事实上,在网络上,Expo 更新只是网络应用。
¥On Android and iOS, the standalone apps you submit to the app stores are examples of client apps that run your updates. On the web, the web browser is the client app that runs updates. In fact, on the web, Expo updates are just web applications.
更新嵌入在独立应用中,并在构建独立应用后通过互联网提供后续更新。由于通过 Internet 下载更新需要占用带宽且需要时间,因此优化更新交付的最有效方法之一就是缩小更新大小。本指南介绍了一些减少更新大小的方法。
¥Updates are embedded in standalone apps and subsequent updates are delivered over the internet after a standalone app has been built. Because downloading an update over the internet uses bandwidth and takes time, one of the most effective ways to optimize update delivery is to make it smaller. This guide covers some ways to reduce the sizes of your updates.
¥Estimating the size of an update
估计更新大小的一种方法是运行 expo export
,它为每个平台导出更新,可以自托管。该更新包括 JSON 清单、JavaScript 打包包以及图片和自定义字体等多个资源。
¥One way to estimate the size of an update is to run expo export
, which exports an update for each platform, which can be self-hosted. The update includes a JSON manifest, a JavaScript bundle, and several assets like images and custom fonts.
导出的更新包含未压缩的文件,除非这些文件格式本质上是压缩的,例如 JPEG 和 PNG。独立应用中嵌入的更新的大小通常是更新文件大小的总和。
¥Exported updates contain uncompressed files, unless those file formats are intrinsically compressed, like JPEG and PNG. The size of an update embedded in a standalone app is typically the sum of the sizes of the update's files.
当通过更新服务提供更新时,它们会使用 gzip 进行压缩。要估计通过更新服务提供的清单或 JavaScript 包的大小,请运行 gzip <file>
。其他文件,如 JPEG 图片和 MP3 音频文件,已经根据其文件格式进行了压缩,CDN 不需要进一步压缩它们。
¥When updates are served through the updates service, they are compressed with gzip. To estimate the size of a manifest or JavaScript bundle when served through the updates service, run gzip <file>
. Other files like JPEG images and MP3 audio files are already compressed by virtue of their file formats, and the CDN does not need to compress them further.
¥Limits on the updates service
发布 Expo 应用更新的方式就像发布网站的新版本一样。事实上,当你发布 Expo Web 应用的更新时,你正在发布网站的新版本。无论底层平台如何,Expo 更新都是由在 Android、iOS 和 Web 上运行你的应用的用户下载的,你的更新越小,你的用户下载它们的速度就越快、越可靠,并消耗更少的数据计划 关于单元格连接。
¥The way to think about publishing an update to your Expo app is like publishing a new version of your website. In fact, when you publish an update to your Expo web app, you're publishing a new version of your site. Regardless of the underlying platform, Expo updates are downloaded by users running your app on Android, iOS, and the web and the smaller your update, the faster and more reliably your users will be able to download them and use up less of their data plans on cell connections.
Expo 当前的更新服务旨在容纳更新,其中包括 JS 代码和资源,大约 50 MiB。许多精心设计的生产应用使用的数据远少于此,这有助于更好的用户体验。
¥Expo's current updates service is designed to accommodate updates, which comprise JS code and assets, around 50 MiB. Many well-engineered production apps use far less than this, which contributes to better user experiences.
以下是一些有助于减少更新大小的通用技术。其中许多也是优化网站的技术,因为 Expo 更新和网站都是通过网络提供的。
¥Below are a couple of general techniques that help reduce the size of updates. Many of them are also techniques to optimize websites since both Expo updates and websites are served over the web.
¥Optimize images
如果之前没有进行优化,许多图片的大小可能会缩小 30% 以上。优化图片的一种简单方法是将它们调整为你的应用实际使用的尺寸;如果你的图片尺寸为 4032x3024,但你的应用只需要显示 400x300 图片,则使用双三次锐化等良好插值算法缩小图片尺寸将大大减小图片的大小。
¥Many images can be reduced by more than 30% in size if they haven't been previously optimized. One simple way to optimize images is to resize them to the dimensions your app actually uses; if your image dimensions are 4032x3024 but your app only needs to display a 400x300 image, downsizing your image with a good interpolation algorithm like bicubic sharpening will greatly reduce your image's size.
优化图片的另一种方法是使用像 expo-optimize 这样的优化器重新编码它们,它会优化 Expo 项目中的所有兼容图片:
¥Another way to optimize images is to re-encode them using an optimizer like expo-optimize, which optimizes all compatible images in you Expo project:
-
npm install -g sharp-cli
-
npx expo-optimize <project-directory> [options]
你可能还喜欢使用许多其他图片优化器,例如 jpegoptim、guetzli、pngcrush 或 optipng。imagemin 是另一个程序和 JS 库,支持各种优化器的插件。还有许多在线服务可以为你优化图片。
¥There are many other image optimizers you may like to use like jpegoptim, guetzli, pngcrush, or optipng. imagemin is another program and JS library that supports plugins for various optimizers. There are also many online services that can optimize your images for you.
一些图片优化器是无损的。这意味着它们会将你的图片重新编码为更小,而显示的像素不会发生任何变化或丢失。当你需要不影响原始图片的每个像素时,无损优化器和无损图片格式(如 PNG)是一个不错的选择。其他图片优化器是有损的,这意味着优化后的图片与原始图片不同。通常,有损优化器效率更高,因为它们会丢弃视觉信息,从而减小文件大小,同时使图片对人类来说看起来几乎相同。像 imagemagick
这样的工具可以使用像 SSIM 这样的比较算法来了解两个图片看起来有多相似。与原始图片相似度超过 95% 的优化图片远小于原始文件大小的 95%,这是很常见的!
¥Some image optimizers are lossless. This means they re-encode your image to be smaller without any change, or loss, in the pixels that are displayed. When you need each pixel to be untouched from the original image, a lossless optimizer and a lossless image format like PNG is a good choice.
Other image optimizers are lossy, which means the optimized image is different from the original image. Often, lossy optimizers are more efficient because they discard visual information that reduces file size while making the image look nearly the same to humans. Tools like imagemagick
can use comparison algorithms like SSIM to give a sense of how similar two images look. It's quite common for an optimized image that is over 95% similar to the original image to be far less than 95% of the original file size!
¥Reduce large dependencies
较大的 npm 依赖会极大地增加更新中代码的大小。虽然像 expo
、react
和其他几个包这样的依赖是必要的并且非常有用,但有时,即使你只使用其中的一种方法,依赖也可能会非常大,或者你的 JS 包中可能有同一依赖的多个版本。react-native-bundle-visualizer
适用于 Expo 应用以及裸 React Native 应用,并显示 JS 包中文件的详细视图。
¥Large npm dependencies can contribute greatly to the size of your code in an update. While dependencies like expo
, react
, and several more packages are necessary and very useful, sometimes a dependency can be surprisingly large even if you use only one method from it, or you might have multiple versions of the same dependency in your JS bundle. react-native-bundle-visualizer
works for Expo apps as well as bare React Native apps and shows a detailed view of the files in your JS bundle.
¥Download files when needed
有时,应用包含应用启动时不需要的文件。在这些情况下,你可以将这些额外文件上传到你自己的服务器,并通过 fetch(url)
或 <Image source={{ uri: url }}>
引用应用代码中的 URL。通过按需下载这些文件,你可以将它们移出更新并减小其大小。
¥Sometimes apps include files that they don't need right away when the app launches In these scenarios, you can upload these extra files to your own servers and reference the URLs from your application code via fetch(url)
or <Image source={{ uri: url }}>
, for example. By downloading these files on demand, you can move them out of the update and reduce its size.
¥Building your app on your own computer
如果你需要构建具有大型资源(例如大型嵌入式视频)的应用,一个简单实用的解决方案是使用裸工作流程并使用 Android Studio 和 Xcode 编译应用。你可以使用自己的计算机,也可以通过云提供商配置 Linux 和 macOS VM,以在其上运行适用于 Android 和 iOS 的标准构建工具链。
¥If you need to build an app with large assets, such as large embedded videos, a simple and practical solution is to use the bare workflow and compile the app using Android Studio and Xcode. You can either use your own computer or provision Linux and macOS VMs with a cloud provider on which to run the standard build toolchains for Android and iOS.
使用 expo-updates
,你还可以在自己的服务器上托管更新,这可能支持任意大的文件。
¥With expo-updates
you can also host updates on your own servers, which may support arbitrarily large files.
¥Self-hosting your updates
除了在自己的计算机上构建应用之外,你还可以在自己的服务器上托管更新。了解有关 在你的服务器上托管更新 的更多信息。
¥In addition to building your app on your own computer, you can host your updates on your own servers. Read more about Hosting Updates on Your Servers.