React Native 拆包

Posted 2022-07-11 Songlcy

背景

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

多业务包

第一个想到的就是拆分多业务包，既然拆分为一个业务包不够，那我多拆为几个业务包不就可以了。当一个 React Native 应用拆分为多个业务包之后其实就相当于拆分为多个应用了，只不过代码在同一仓库里。这虽然可以解决单个应用不断膨胀的问题，但是有不少局限性。接下来一一分析：

• 链接替换，不同的应用需要不同的地址，替换成本较高。
• 页面之间通信，之前是个单页应用，不同页面之间可以直接通信；拆分之后是不同应用相互通信需要借助客户端桥接实现。
• 性能损耗，打开每个拆分的业务包都需要单独起一个 React Native 容器，容器初始化、维持都需要消耗内存、占用CPU。
• 粒度不够，最小的维度也是页面，无法继续对页面中的组件进行拆分。
• 重复打包，部分在不同页面之间共享的工具库，每个业务包都会包含。
• 打包效率，每一个业务包的打包过程，都要经过一遍完整的 Metro 打包过程，拆分多个业务包打包时间成倍增加。

动态导入

作为一个前端想到的另一方案自然就是动态导入（Dynamic import）了，基于其动态特性对于多业务包的众多缺点，此方案都可避免。此外拥有了动态导入我们就可以实现页面按需加载&#