React在构建高性能前端应用时有哪些最佳实践？

本文共计4261个文字，预计阅读时间需要18分钟。

目录+背景+多业务包+动态导入+Metro+打包原理+打包过程+Bundle+分析+__d函数+__r函数+案例设计+分+识别入口+树+Bundle生成+合并+总结+背景+随业务发展，每个React Native应用的代码量

目录

• 背景
• 多业务包
• 动态导入
• Metro 打包原理
• 打包过程
• bundle 分析
• __d函数
• __r函数
• 方案设计
• 分
• 识别入口
• 树拆分
• bundle 生成
• 合
• 总结

背景

随着业务的发展，每一个 React Native 应用的代码数量都在不断增加，bundle 体积不断膨胀，对应用性能的负面影响愈发明显。虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理，拆分为一个基础包和一个业务包进行一定程度上的优化，但对日益增长的业务代码也无能为力，我们迫切地需要一套方案来减小我们 React Native 应用的体积。

多业务包

第一个想到的就是拆分多业务包，既然拆分为一个业务包不够，那我多拆为几个业务包不就可以了。