Hermes bundler is bigger when treeShake used

[Rag0n]

What happened?

When treeShake option is used, bytecode bundle becomes bigger than js bundle.
When treeShake option isn't used, bytecode bundle size is smaller than js bundle as expected and size is equal to the default metro bundler.

I was trying to diff bundles with rnx-bundle-diff, but got an error:

undefined:1
var __BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),__DEV__=false,process=this.process||{},__METRO_GLOBAL_PREFIX__='';process.env=process.env||{};process.env.NODE_ENV=process.env.NODE_ENV||"production";
^

SyntaxError: Unexpected token v in JSON at position 0

Affected Package

@rnx-kit/cli, @rnx-kit/metro-config, @rnx-kit/metro-serializer-esbuild

Version

0.16.9

Which platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows

System Information

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 114.28 MB / 16.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.14.2 - ~/.local/share/nvm/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.local/share/nvm/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.local/share/nvm/v16.14.2/bin/npm
    Watchman: 2023.01.23.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/alex_guschin/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7621141
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.6 => 0.71.6
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

1. Bundle js: react-native rnx-bundle --entry-file index.js --platform ios --dev false --reset-cache --bundle-output output/main.jsbundle --assets-dest output
2. Compile js bundle into bytecode: ./ios/Pods/hermes-engine/destroot/bin/hermesc -emit-binary -O -output-source-map -out output/main.binary.jsbundle output/main.jsbundle

Expected result: bytecode bundle is smaller than js bundle.
Actual result: bytecode bundle(8.9MB) is bigger than js bundle(6.6MB).

Without rnx-kit bundle size is 8MB, bytecode bundle size is 7.3MB. So there's potential of reducing bundle size, but not sure why it doesn't work.

Code of Conduct

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

[tido64]

Hi, can you reproduce this in a new project? I've just tested this locally and I don't see your numbers:

608239 main+esbuild.android.bundle
575080 main+esbuild.android.bundle.hbc

[Rag0n]

Hey @tido64, thank you for the response. In a new project works as expected.

Metro:
811433 main.jsbundle
725808 main.binary.jsbundle
Esbuild:
600821 main-rnx.jsbundle
569736 main.binary.rnx.jsbundle

The main issue in our project is that bytecode bundle build with esbuild is bigger than bytecode bundle build with metro.
We'll try to figure it out, I would appreciate your advice if you've any ideas.

[kelset]

@Rag0n it's very hard to be able to provide advices without knowing anything about the codebase, which is why we try to ask for repros. The more you can share, the easier it'd be for us to be able to provide pointers.

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 14 days. It will be closed if no further activity occurs within 14 days of this comment.

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 14 days. It will be closed if no further activity occurs within 14 days of this comment.