Slow bundle download(~2 mins) in dev mode by ReloadCommand(r) on iOS after RN 72 upgrade

[jayshah123]

Description

I have a large bundle.
After recent upgrade to RN 0.72.12, metro version - metro@0.76.9, I see large download times for already traversed bundle, when using reload command "r"

The first load, bundle does not need downloading.

But for every reload command("r" press on iOS),
the bundle download to simulator (for the already traversed bundle) takes about 2 mins.

I did some analysis on size of the bundle transferred by Metro Server is ~248 MB. I am working to reduce bundle size, but due to lack of tree-shaking, the current size is about ~248 MB. In the absensece of tree shaking, what tools are recommended for bundle size analysis?

The size was measured by the value of following code in Server.js in metro source code.

mres.setHeader(
          "Content-Length",
          String(Buffer.byteLength(result.bundle))
        );

For the same project, if I try to download using curl, it takes about 7s to download to a file, for an already traversed bundle, which was measured via:

curl -kv -w '\n* Response time: %{time_total}s\n' http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.mypackagename

Steps to reproduce

1. install the application which has a really large bundle
2. let the bundle load completely.
3. Press "r" to reload.
4. You will see Downloading "1..100%" takes around 2 mins to finish.

React Native Version

0.72.12

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.3.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 7.24 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.13.0
    path: ~/.nvm/versions/node/v18.13.0/bin/node
  Yarn:
    version: 1.18.0
    path: ~/.nvm/versions/node/v18.13.0/bin/yarn
  npm:
    version: 8.19.3
    path: ~/.nvm/versions/node/v18.13.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/jshah/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/jshah/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.12
    wanted: 0.72.12
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

NA

Reproducer

private code/bundle.

Screenshots and Videos

Downloading 1..100% takes ~2 mins when ReloadCommand "r" is pressed.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[jayshah123]

Issue still persists when updated to 0.72.12.

[jayshah123]

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.72.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

Tried this, still the same issue.

Let me know any relevant files/code/functions which can be investigated.
Are there ways to speed up RCTMultipartDataTask or find bottlenecks between simulator<->metro server?

[efstathiosntonas]

@jayshah123 you could try react-native-bundle-visualizer

[jayshah123]

Bundle size does not seem to be a problem, due to following observation:

Good case - kill the app by swipe from recents, relaunch from apps - Downloading (an already traversed bundle) takes ~5 secs.

On the other hand,
Bad case - "r key press" - Downloading (an already traversed bundle) takes ~2 mins.

There seems to be no difference on the server sides for both cases - returns instantly from metro server ~1s in the finish section of requestprocessor.

The only difference I notice between good vs bad case is lots of slow reads on RCTMultipartStreamReader's readAllPartsWithCompletionCallback method doing the stream reads are significantly slower: NSInteger bytesRead = [_stream read:buffer maxLength:bufferLen];
Where I see:

1. Good case - 0.000006 seconds per read -> leading to 5s download time.
2. Bad case - 0.002 seconds per read -> leading to 2 mins download time.

Maintainers, what is a good place/way to start investigating the root cause?
Happy to raise a fix PR in here or in RN depending on the root cause and fix. cc @robhogan for any suggestions.