React Native Optimization: Bundle Splitting and Container Preheating for Improved Page Load Speed

Background

As React Native technology is widely applied in business, important features are increasingly implemented using React Native, which raises higher requirements for the opening speed of React Native pages, because opening speed is a significant factor influencing user bounce rate.

Bundle Splitting

The team implemented bundle splitting to reduce the size of the JavaScript package loaded at startup, separating rarely used code from the main bundle.

Container Preheating

Container preheating prepares the React Native runtime in advance during idle moments, aiming to improve hit rate without affecting user experience; strategies are refined based on business scenarios.

Effect

After enabling both bundle splitting and preheating, the mall page package size decreased from 1.1 MB to 856 KB. iOS page launch time dropped from about 450 ms to 200 ms, and Android from about 4500 ms to 2500 ms, showing significant optimization on both platforms.

Conclusion

The optimization consists of two independent capabilities—bundle splitting and preheating—each validated with A/B testing to ensure stability. Future work will delve deeper into business scenarios to further improve preheating hit rate.