【问题标题】:Removing unused images (@2x or @3x) from ios bundle in react-native?从 react-native 中的 ios 包中删除未使用的图像(@2x 或 @3x)?
【发布时间】:2018-12-29 14:46:48
【问题描述】:

我正在尝试优化我的应用程序性能,并按照 react-native 指南 https://facebook.github.io/react-native/docs/images 为我的图像添加了 @3x@2x 后缀

这显然是重复的图像,但我假设基于设备只会删除 @2x@3x 图像?

现在我的包刚刚增加到额外的 15mb 大小,似乎所有图像都被使用,无论我在什么设备上测试。

这是预期的还是有办法改进它,所以每个设备都使用正确的分辨率,但没有捆绑额外的图像?

应用程序大小是通过TestFlight 测试的,我不确定,但也许从 App Store 下载时这些图像会被删除?

【问题讨论】:

    标签: ios react-native optimization


    【解决方案1】:

    如果您使用过react-native-cli,那么您可以在Xcode IDE 中为iOS 文件夹编译项目。如果编译成功,请按照以下步骤操作,

    您需要在项目的构建设置中启用bitcode 才能启用App Thinning 功能。

    启用Bitcode的过程:

    • 在项目构建设置中,确保您已启用所有设置都可见。
    • 构建选项位于第 4 部分。为Enable Bitcode 选项选择Yes

    App Store 和操作系统优化了 iOS、tvOS 和 watchOS 应用的安装,方法是根据用户特定设备的功能定制应用交付,并且占用空间最小。这种优化称为应用程序精简,可让您创建使用最多设备功能、占用最少磁盘空间并适应 Apple 可以应用的未来更新的应用程序。更快的下载速度和更多空间用于其他应用和内容可提供更好的用户体验。

    切片(iOS、tvOS) 切片是为不同目标设备创建和交付应用程序包变体的过程。变体仅包含目标设备所需的可执行架构和资源。您继续开发应用程序的完整版本并将其上传到 App Store Connect。 App Store 将根据您的应用支持的设备创建和提供不同的变体。使用资产目录,以便 App Store 可以选择适合每个设备变体的图像、GPU 资源和其他数据。当用户安装应用程序时,会下载并安装用户设备的变体。

    Xcode 在开发过程中模拟切片,因此您可以在本地创建和测试变体。当您在设备或模拟器中构建和运行应用程序时,Xcode 会对您的应用程序进行切片。当您创建档案时,Xcode 会包含您应用的完整版本,但允许您从档案中导出变体。

    注意:运行 9.0 及更高版本的设备支持切片应用;否则,App Store 会向客户提供通用应用程序。

    有关缩小应用程序大小的更多详细信息,请参阅Reducing the size of my AppApp Thinning

    【讨论】:

    • 感谢您提供额外信息,这实际上是我现在的项目设置方式。我使用 XCode 归档了我的应用程序,我的最小 ios 目标设置为 11.4,我使用的是 XCode 10。当我将应用程序上传到应用程序中心时,可以选择查看 App Store Sizes。对我来说,所有这些都是相同的,而且自从添加了@2x 图像后它们增加了。我在 react-native repo 中打开了相关问题,其中包含更多详细信息(github.com/facebook/react-native/issues/22826)出于好奇,你真的设法得到这工作?如果是这样,如何在 App Store 之前正确测试这个?
    • 在 TestFlight 构建中,可以测试它会在 TestFlight 应用程序中显示包大小。您可以在不同的设备上观察不同的二进制大小。
    • 这就是我测试它的方式,通过 iPhone XS 和 iPhone 5 上的 TestFlight。捆绑包大小相同。我也仔细检查了Settings 应用程序。我没有提到的一个警告是,我的图像与我的 js 代码一起存储在自定义文件夹 assets/myImage@3x.pngassets/myImage@2x.png 中,因此它们不是来自 .xcassets。这可能是问题吗,即 react-native cli 是否将我的图像复制到 .xcassets 或没有?
    • 图像应该在.xcassets 文件夹中以使用App Slicing,我不认为react-native cli 复制会自动这样做。
    • 那是我的问题。我以前在 .xcassets 中使用过它们,但是当我将它们与 react native 一起使用时遇到了内存管理问题,即图像加载到内存中并且从不卸载。我会四处寻找,谢谢你的时间:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-22
    • 2021-11-05
    • 2020-10-09
    • 2019-07-16
    • 1970-01-01
    • 1970-01-01
    • 2014-12-17
    相关资源
    最近更新 更多