React native 可视化拆包

最新推荐文章于 2024-08-10 07:51:46 发布

smallnewQaQ

最新推荐文章于 2024-08-10 07:51:46 发布

阅读量1k

点赞数 2

分类专栏： android react naitve 文章标签： react native 拆包可视化拆包拆包工具开源

本文链接：https://blog.csdn.net/tyro_smallnew/article/details/88145814

版权

本文介绍了在React Native中遇到的复杂拆包问题，特别是当业务包包含第三方组件时。提出了固定module id和拆分的打包思路，并分享了一个基于electron的跨平台可视化拆包工具，该工具能自动计算模块依赖，简化拆包过程。开源项目地址：https://github.com/smallnew/react-native-multibundler

摘要由CSDN通过智能技术生成

1、来源

前提是使用metro配置来拆包，可以在之前的博客先了解下：https://blog.csdn.net/tyro_smallnew/article/details/83088216

如果是简单的基础包中包含各种第三方组件、业务包只包含自己写的业务代码情况下的拆包，很简单地使用命令行就可完成拆包。但有些时候业务包也会包含了第三方组件，比如只有一个业务包中使用了第三方日历组件而其他业务包不包含，这样第三方日历组件放在基础包有点冗余，需要单独把日历打在某个业务包中。这个情况用metro命令行打包就有点费力了，因为涉及到了依赖管理。

2、打包思路

拆包主要有两个注意点，一个是module id固定化，二是拆分，业务包依赖第三方module影响到的是拆分这一点。

之前业务包拆分配置如下：

function postProcessModulesFilter(module) {
    const projectRootPath = __dirname;
    if(module['path'].indexOf('__prelude__')>=0){
        return false;
    }
    if(module['path'].indexOf(pathSep+'node_modules'+pathSep)>0){
        if('js'+pathSep+'script'+pathSep+'virtual'==module[&