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

最新推荐文章于 2024-12-17 02:53:28 发布

置顶

smallnewQaQ

最新推荐文章于 2024-12-17 02:53:28 发布

阅读量958

点赞数

分类专栏： react naitve 文章标签： CRN react native 拆包性能

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

版权

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

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

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, op

最低0.47元/天解锁文章