Remove @babel/plugin-transform-async-to-generator from @react-native/babel-preset

[jzaefferer]

Here's an idea to make RN apps slightly smaller and easier to debug, by making stacktraces involving async/await easier to read: Remove @babel/plugin-transform-async-to-generator from the @react-native/babel-preset This transform is no longer needed, since hermes supports async/await natively.

For our app, we've used yarn expo export --no-minify --no-bytecode --platform android -c to check if the transformed bundle contains _asyncToGenerator functions. This unminified bundle was 21.5 MB. After removing @babel/plugin-transform-async-to-generator from react-native-babel-preset/src/configs/main.js, this dropped to 21.3 MB.

For now we're using patch-package to patch @react-native/babel-preset

Looking at all the plugins listed in the preset ( https://github.com/facebook/react-native/blob/main/packages/react-native-babel-preset/package.json#L18-L56 ), I wonder which of these are actually needed these days. There might be more opportunities for smaller and faster bundles.

Is this something that could get accepted as a pull request?

[robhogan]

Hey @jzaefferer - yes in principle we're open to updating these, there are almost certainly a few redundant ones. A few things to bear in mind:

• @react-native/babel-preset needs to support JSC (ie Safari on iOS >= 15.4, and the version of JSC we build for Android) as well as Hermes, so support needs to be universal before we remove plugins completely, but we can gate individual plugins by target (isHermes).
• There may be runtime performance implications, we can check with the Hermes team or run an experiment case-by-case on that.
• Static Hermes is coming soon-ish, which will have a very different level of language support and performance characteristics, so it might make sense to hold off for that.

For native async/await specifically though - there's one major caveat. Hermes doesn't support async arrow functions, which in recent RN we don't transform for Hermes - see facebook/react-native#44534.

hermesc -emit-binary -out asyncarrow.hbc asyncarrow.js
asyncarrow.js:1:14: error: async functions are unsupported
var myFunc = async () => { print('hello') };
             ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Emitted 1 errors. exiting.

[jzaefferer]

Thanks for the insights! Given all that, I agree it's better to hold off on this optimization.

Hopefully one day RN can support solely Static Hermes, which supports all the JS features we need, and babel can be (mostly) removed...

[jzaefferer]

I'll close this