React Native拆包（RN端）分享

ReactNative代码拆分文档

目的

1. 优化现有程序的包下载逻辑，优化70%以上

    总共2M优化到100K以内
   

2. react native程序秒开，优化白屏显示

思路

替换自增方式增加关联，改用字符串引用。项目中增加空白首页进行预加载。

方法

1. 自定义metro-bundle
2. 自定义metro-bundler-cli
3. 增加框架sm-react-native-templates

sm-metro-bundler.png

工具文档地址:

• @caiwenshu/metro-bundler (https://github.com/caiwenshu/metro/tree/0.20.x)

• sm-metro-bundler-cli (https://github.com/caiwenshu/sm-metro-bundler-cli)

• sm-react-native-templates (https://github.com/caiwenshu/sm-react-native-templates

开发方式

sm-metro-bundler-develop.png

sm-metro-bundler-cli介绍

sm-metro-bundler-cli文档

React Native模板介绍

什马ReactNative模板介绍文档

原生集成

ReactNative拆分原生逻辑.png

注: RN1 - RN5为单独的模块

引用

• 参考 https://github.com/tsyeyuanfeng/metro-bundler-cli
• 参考 https://github.com/tsyeyuanfeng/metro-bundler
• 参考 https://blog.csdn.net/yeputi1015/article/details/81476369