Michał shows a project using the Internationalization API to format numbers in German. The app includes several polyfills because the team thought Hermes lacked some internationalization support. The React Native Optimization Guide says that, as of January 2025, some of those polyfills are unnecessary.
You’re Loading Too Much Unnecessary Hermes Polyfills
Speaker
Michał, a principal engineer at Callstack, explains how React Native teams can reduce app size and improve startup performance by removing unnecessary Hermes internationalization polyfills and choosing platform-specific libraries.
Michał explains that React Native tooling normally bundles JavaScript and compiles it to Hermes bytecode before it reaches users. In his example, the original JavaScript bundle is 3.5 MB and the bytecode is 2.3 MB.
After removing unnecessary polyfills, the JavaScript bundle falls to 3.2 MB and the Hermes bytecode to 2.1 MB. Michał says the smaller output can reduce app size and may improve time to interactive on some devices.
Michał recommends React Native Quick Crypto instead of CryptoJS, saying it can execute around 50 times faster. He also suggests native stack and bottom-tab navigators from React Navigation, alongside other platform-specific libraries listed in Callstack’s guide.
Takeaways
- Check whether your Hermes version already supports the internationalization APIs covered by your polyfills.
- Measure both the JavaScript bundle and Hermes bytecode before and after removing polyfills.
- Evaluate React Native Quick Crypto as an alternative to CryptoJS when using cryptographic operations.
- Consider native stack and bottom-tab navigators for platform-specific navigation optimizations.
Mentioned in this talk
Search inside this talk
What was claimed 8
- role at
“I'm Michał, a principal engineer at Callstack.”
YouTube Unverified1 source· Talk
- built
“In The Ultimate Guide to React Native Optimization 2024, we've covered a bunch of techniques”
0:30inThe Size of Your App MattersYouTube Verified2 sources· Talk
- feature
Hermes Agent: Compiles JavaScript to optimized bytecode“bytecode, a different representation optimized by the Hermes engine”
YouTube Unverified1 source· Talk
- metricinternationalization polyfills: Removing redundant polyfills reduced the JavaScript bundle by around 300 KB and Hermes bytecode by around 200 KB
“the JavaScript is 3.2 megabytes, around 300 kilobytes smaller... bytecode... around 200 kilobytes smaller”
YouTube Unverified1 source· Talk
- uses
“the native one from the React Navigation Bottom Tabs project”
YouTube Unverified1 source· Talk
- uses
“import it from React Navigation Native Stack”
YouTube Unverified1 source· Talk
- uses
“React Native Quick Crypto”
YouTube Unverified1 source· Talk
- metricReact Native Quick Crypto: Around 50 times faster execution than CryptoJS
“replace it with React Native Quick Crypto for around 50 times faster execution”
YouTube Unverified1 source· Talk
