Archiving IOS build is taking a lot of time after enabling hermes and MetroSerializer

[amanmoar277]

What happened?

I am trying to archive the IOS build with hermes enabled, but it is taking a lot of time i.e. (~15-20x) times the time taken to build when hermes is disabled. I have tried this on multiple RN versions like 0.68.0, 0.71.8.

Even a simple RN app is taking almost 1 hour 15 minutes to archive the IOS build with hermes enabled and using esbuild bundler.

I am able to archive the build properly (i.e. without any effect on build time) in the following scenarios -

1. After disabling hermes and using the @rnx-kit packages such as
   a. @rnx-kit/babel-preset-metro-react-native
   b. @rnx-kit/metro-config
   c. @rnx-kit/metro-serializer-esbuild
2. After using the default babel and metro config (which is shipped by default with RN project)

The esbuild is able to generate the JS bundle successfully in every scenario but the following step is causing issue.

Showing Recent Issues

• /Users/AwesomeProject/ios/Pods/hermes-engine/destroot/bin/hermesc -emit-binary -O -out /Users/Library/Developer/Xcode/DerivedData/AwesomeProject-gfqsdgqywjohyjfoxkrvubakbthd/Build/Intermediates.noindex/ArchiveIntermediates/AwesomeProject/BuildProductsPath/Release-iphoneos/AwesomeProject.app/main.jsbundle /Users/Library/Developer/Xcode/DerivedData/AwesomeProject-gfqsdgqywjohyjfoxkrvubakbthd/Build/Intermediates.noindex/ArchiveIntermediates/AwesomeProject/BuildProductsPath/Release-iphoneos/main.jsbundle

Here is the metro and babel config which I am using.

package.json

I can't figure out why this is happening. Please let me know if I am missing some config here.

Affected Package

@rnx-kit/metro-serializer-esbuild, @rnx-kit/metro-config, @rnx-kit/babel-preset-metro-react-native

Version

0.1.23, 1.3.6, 1.1.4

Which platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows

System Information

% npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 13.3.1
    CPU: (8) x64 Apple M1
    Memory: 73.29 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
    Yarn: Not Found
    npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
    Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

1. Install the above mentioned libs.
2. Change the babel.config.js and metro.config.js, as described in above mentioned screenshot.
3. Try to archive the IOS build.
4. The build process will take a lot of time in the following step (after successfully generating the JS bundle)

• /Users/AwesomeProject/ios/Pods/hermes-engine/destroot/bin/hermesc -emit-binary -O -out /Users/Library/Developer/Xcode/DerivedData/AwesomeProject-gfqsdgqywjohyjfoxkrvubakbthd/Build/Intermediates.noindex/ArchiveIntermediates/AwesomeProject/BuildProductsPath/Release-iphoneos/AwesomeProject.app/main.jsbundle /Users/Library/Developer/Xcode/DerivedData/AwesomeProject-gfqsdgqywjohyjfoxkrvubakbthd/Build/Intermediates.noindex/ArchiveIntermediates/AwesomeProject/BuildProductsPath/Release-iphoneos/main.jsbundle

Code of Conduct

• I agree to follow this project's Code of Conduct

[tido64]

Hi @amanmoar277, I wonder if this is also related to #2416 and #2419. Can you try adding -w to the hermesc command and see if that helps? I suspect it has something to do with the warnings that are output by the compiler.

[Thanaen]

Hello,
I confirm that passing the "-w" argument to the hermes call solves the problem.

However, I didn't find a clean way to do this. 😕
I had to manually modify the node_modules/react-native/scripts/react-native-xcode.sh file to be able to modify the arguments passed to Hermes.

[tido64]

What you also can try to do is setting minifyWhitespace: false. This tells esbuild to not remove whitespaces, which will create shorter lines for Hermes to output:

const { makeMetroConfig } = require("@rnx-kit/metro-config");
const { MetroSerializer, esbuildTransformerConfig } = require("@rnx-kit/metro-serializer-esbuild");

module.exports = makeMetroConfig({
  serializer: {
    customSerializer: MetroSerializer([], {
      minify: true,
      minifyWhitespace: false,
      minifyIdentifiers: true,
      minifySyntax: true,
    }),
  },
  transformer: esbuildTransformerConfig,
});

Documentation: https://github.com/microsoft/rnx-kit/tree/main/packages/metro-serializer-esbuild#minifywhitespace

[tido64]

For fix and workaround, see #2416 (comment).