search

IjzerenHein / react-native-bundle-visualizer

See what packages are increasing your react-native bundle size 📦
MIT License
1.43k stars 42 forks source link

Bundle size does not reflect App Store size #121

Open tomskopek opened 1 year ago

tomskopek commented 1 year ago

After running:

yarn run react-native-bundle-visualizer

I get this as output:

Bundle is 7.82 MB in size (unchanged since last run)
Unable to map 1252691/8196479 bytes (15.28%)

However, our app in the iOS app store is around 62 MB

Am I missing something? Is bundle size a different thing than the app size in the app store?

effektsvk commented 1 year ago

Bundle size is only the javascript part of your app, it's the file that is created by Metro bundler. Rest of the app consists of native packages, all your assets such as images and app icon, hermes (javascript engine used by React Native), and so on.

tomskopek commented 1 year ago

Thanks @effektsvk - any idea of a tool to profile the other stuff? We don't have many images, all are compressed and total size of images is < 400kb I'm trying to figure out where the bloat is

effektsvk commented 1 year ago

I'm not really sure, there are some tips in the Apple docs but I didn't try that yet. Maybe you could check ios/Pods folder to see if there are any big dependencies (these will be compiled down to a smaller size in final app though) but you'll probably need all of them anyway.

effektsvk commented 1 year ago

Hey @tomskopek, I looked into it a bit. One of the ways you can analyze your iOS build is to do an archive (in your Xcode project you can do Product > Archive. When the archive is done, you can find it in the Finder by right clicking on it. You can find your app in Products/Applications, go inside YourApp.app by right clicking and choosing Show Package Contents and you can dig in there to see if you find something 😅

Just small note, I found out that Hermes (the JavaScript engine that React Native uses) is pretty huge, it actually takes up around 500 MB in my app. So if you are using somewhat recent version of React Native, you'll probably notice that too. It's located in the Frameworks/hermes.framework in your .app file.

tomskopek commented 1 year ago

Thanks for sharing @effektsvk !

It's interesting that the size of my archive is 751 MB, but the size on the app store is 62 MB. I'm guessing you experienced the same dramatic compression(?) since you noted that you are seeing Hermes is 500MB as well.

You are correct that Hermes is the biggest item in my package contents. One other framework (mapbox) stood out as being rather large (~100 MB), but pretty much everything else is tiny. And it's not clear to me how much that Pod really contributes to the final size due to that compression(?) step before it's sent to the app store.

I'd like to try creating a vanilla react-native app and then another with just the mapbox Pod and see what happens. Maybe I can narrow down the issue using trial and error. However it would really be ideal to be able to inspect the actual archive that is sent to the app store (the ~62MB one) to properly compare...