React native拆包的正确姿势——基于metro bundle

最新推荐文章于 2024-11-27 13:22:23 发布

置顶

smallnewQaQ

最新推荐文章于 2024-11-27 13:22:23 发布

阅读量9.6k

点赞数 2

分类专栏： react naitve 文章标签： react native 分包 jsbundle

本文链接：https://blog.youkuaiyun.com/tyro_smallnew/article/details/83088216

版权

本文探讨了React Native应用中进行分包的原因，旨在减少内存开销和优化热更新。介绍了不同分包方法的优缺点，包括moles-packer、修改打包代码和diff patch，并指出这些方法在新版本的React Native中可能已不再适用。重点介绍了metro bundle，它是React Native 0.57及更高版本支持的打包工具，能够支持分包。通过配置createModuleIdFactory和processModuleFilter，可以实现分包。最后，提出了在Android和iOS平台上加载多bundle的实现策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、分包

观察现在一些接入React native的大厂，如菜鸟、大搜车、去哪儿，都将react native 的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了，不了解的可以去搜索看看。我这边只总结下：react native原生打出来的包都只有一个jsbundle(除了rambundle)，里面包含了所有你写代码和react native代码和你依赖的第三方库代码(当然还有polyfill)，如果是纯rn代码这倒没什么差别，但一般大厂都是原生应用内接入react native页面，而且一个应用内有许多不同业务，很可能是不同部门开发的，这样一个应用内就有许许多多jsbundle，如果不分包，那就有许许多多的重复的react native代码和第三方库，所以一般做法都是将重复的react native代码和第三方库打包成一个基础包，然后各个业务在基础包的js环境下运行，这样做可以减少内存开销且热更新的时候只需要下载几十KB的业务包，要知道react native代码和第三方库压缩前一般都能上1M多(依赖的多的可能有2M多)。