Code Splitting in React Native

on YouTube ↗29m

" summary

Discusses techniques for splitting and loading React Native app code to reduce bundle size and improve startup performance, focusing on tools and approaches used in the React/React Native ecosystem (for example techniques around bundling and Webpack-like split strategies). Covers practical considerations for implementing code splitting in mobile apps built with React Native and how it affects app delivery and runtime behavior.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 0:10Code Splitting in React Native @geekykaran
3. 4:29Bundling in React Native
4. 5:51Size increases linearly with complexity
5. 6:33Single file with an index of all modules
6. 9:17Faster startup but slower subsequent screen loads
7. 11:23Tweak metro to generate multiple bundles using dynamic imports (link)
8. 12:012. Add custom implementation for dynamic imports (link)
9. 12:38Use our custom dynamic import implementation to tell the native side to load the new bundle (link)
10. 12:50Write native code to inject new bundle into the Javascript VM (link)

" related talks

• 26mOptimizing React Native PerformanceSummer Knight · Chain React 2024
• 22mCoding Session: React Native PracticeIgor Kachura · JavaScript fwdays'20 autumn online
• 47mReact Native code reuse: Architecture that worksAaron Greenwald · Mobile Era 2017
• 35mBridging the Gap: How to use React Native in existing large native code basesLeland Richardson · ReactiveConf 2016
• 44mBest Practices to Build Scalable React Native AppsAdhithi Ravichandran · All Things Open 2020
• 37mMicro Frontends for MobileMo Javad · Micro Frontends Conference 2024
• 30mMaking React Native Fast & LeanDan Caspi · You Gotta Love Frontend 2016
• 21mJavaScript, React Native and PerformanceTadeu Zagallo · ReactEurope 2016