携程CRN源码详解之拆包(四)——业务打包

最新推荐文章于 2024-11-29 16:01:38 发布

原创

最新推荐文章于 2024-11-29 16:01:38 发布 · 置顶 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CRN #react native #拆包 #性能

本文详细介绍了携程CRN如何进行业务拆包，利用rambundle按需加载提升页面性能。通过过滤rn_common，修改资源加载方式，统一业务包打包产物，确保Android和iOS平台的一致性。CRN虽然在灵活性上有限，但其完善的生态和优化策略为拆包提供了有效思路。

1、业务包

除了rn_common的包含业务逻辑的代码会被CRN打成业务包。CRN希望把业务包做得尽量地可以按需加载，因此CRN使用了metro本来就有的rambundle功能。rambundle在之前叫做unbundle，这种打包方式能把bundle按模块分散成多个独立的js文件，加载页面的时候只会加载需要的js文件，大大提升了页面的加载速度。

2、打包命令

 cmd = 'node node_modules/react-native/cli.js ram-bundle --config rn-cli.config.js ' + buildCommand + ' --assets-dest bundle_output/publish';
        logOutPut.log(cmd);
        execSync(cmd, { stdio: 'inherit' });

这里明确指明使用ram-bundle方式打包，跟rn_common打包使用的bundle有明显区别。

3、过滤掉rn_common

iOS的ram-bundle是一个整体的问题，为了和Android统一，crn修改了RamBundle.js

//RamBundle.js
function save(bundle, options, log) {

  //CRN BEGIN
  //处理ios打包成多文件目标
  return asAssets(bundle, options, log); //CRN END
  //ORIGINAL:
  //return options.platform === 'android' && !options.indexedRamBundle
  //   ? asAssets(bundle, options, log)
  //   : asIndexedFile(bundle, options, log);
  //ORIGINAL-END
}

如