24｜拆包：Metro拆包的工作原理是什么？
蒋宏伟
你好，我是蒋宏伟。
在上一讲我们聊了热更新，今天这一讲我们聊聊热更新中的拆包环节。
热更新和拆包都是大家聊得比较多的话题，通常一个聊得比较多的技术话题都会有一套成熟的技术方案，比如热更新平台就有 CodePush 这样的成熟方案，但拆包却没有一套大家都公认成熟的方案，这也是很奇怪。
metro-code-split 是我们团队的赵琦同学写的一个基于 Metro 的拆包工具，它能帮你实现 React Native 的拆包工作。
要知道，无论我们是运行 npm start 启动本地调试，还是运行 npm run-ios 构建应用，底层都会用到 Metro 打包工具。
然而，Facebook 开源的 Metro 打包工具，本身并没有拆包功能。它只能将 JavaScript 代码，打包成一个 Bundle 文件，而且 Metro 也不支持第三方插件，所以社区也没有第三方拆包插件。但当初，我们在阅读 Metro 源码的时候，发现了一个可配置的函数 customSerializer，从而找到了不入侵 Metro 源码，通过配置的方式给 Metro 写第三方插件的方法。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Metro拆包工具是一种基于模块的拆包方式，相对于基于文本的拆包方式，它能够实现更快的加载速度。该工具的原理是将包拆分成两份，分两次执行，提前运行内置包，然后并行下载热更新包，最后再接着运行热更新包。这种方式在功能上等效于一次性运行完整的Bundle包，但在性能上更快，能支持非首屏代码延迟加载，减少首屏代码的下载量，提高执行速度。配置包括安装插件、修改package.json文件和metro.config.js配置。通过配置publicPath和dll参数，可以实现按需加载包的根路径配置和内置npm库的配置。文章还介绍了如何使用metro-code-split进行公共包、业务包和按需加载包的拆分，并结合热更新流程进行使用。对于首页是Native页面的混合应用和首页也是React Native页面的多Bundle策略，以及首页是React Native页面但采用单Bundle策略的情况，都给出了相应的处理建议。整体来说，该文章介绍了metro-code-split的原理和使用方法，以及如何结合热更新流程进行应用，对于需要进行React Native应用性能优化的开发者具有一定的参考价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Native 新架构实战课》，新⼈⾸单¥59
《React Native 新架构实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
Aaaaaaaaaaayou关于拆包，分享一下我写过的文章 https://juejin.cn/post/7056402608298131469?share_token=127d466c-9e55-45f8-9eec-4946389a3ec7 https://juejin.cn/post/7067895964794617892?share_token=1a0d8603-a165-4e3e-8445-58d5846648972022-06-203
黑马有点白986先讲讲metro如何配置分包吧，不要一上来就讲原理呀，先run起来。2023-02-14归属地：北京2- Geek_e8d04f把demo下下来，build出来的公共包是0k，出现如下警告，是什么问题？ D:\software\metro-code-split-master\Example>yarn build:dll yarn run v1.22.21 $ mcs-scripts build -t dll -od public/dll Welcome to Metro! Fast - Scalable - Integrated warning: failed to load the preRefPath correctly! are you setting the "dll.referenceDir" correctly? warning: failed to load the dllRefPath correctly! are you setting the "dll.referenceDir" correctly? info Writing bundle output to:, public\dll\_dll.ios.bundle info Done writing bundle output warn Assets destination folder is not set, skipping... Welcome to Metro! Fast - Scalable - Integrated warning: failed to load the preRefPath correctly! are you setting the "dll.referenceDir" correctly? warning: failed to load the dllRefPath correctly! are you setting the "dll.referenceDir" correctly? info Writing bundle output to:, public\dll\_dll.android.bundle info Done writing bundle output warn Assets destination folder is not set, skipping... Done in 22.03s.2024-01-24归属地：广东
davidzhou拆包能理解为 webpack4 的 dllplugin 技术吗2023-04-25归属地：广东
郭智强老师您好，我用 metro 拆包后，也导出了 sourcemap 文件，想做 RN 里的 js 异常反解，异常的调用堆里是一些数字，具体应该解析呢？我是 iOS开发2022-05-301
收起评论