图片上传、本地图片替换OSS

对于RN包体积比较大的问题，我们发现图片占据了大概80%的比例，因此衍生出了本库，用来减少RN包体积。

本项目主要实现两个功能

1、将本地图片上传至CDN

2、利用babel及AST抽象树，动态将本地资源替换为OSS地址

实现原理参考React Native本地图片替换OSS图片

1、在主项目package.json 引入此依赖

npm install --save-dev image-oss-optimization-plugin

2、在主项目package.json，加入执行上传图片命令及配置babel

{ "scripts": { "start": "yarn react-native start --reset-cache", "upload-image": "image-oss-optimization upload --target ./src" } "babel": { "plugins": [ "module:image-oss-optimization-plugin" ] } }

注意：start记得加上--reset-cache清理缓存

3、 在主项目新增文件为：根目录/upload-image-config.json，配置如下信息

{ "ossHost": "https://my.oss-cn-beijing.aliyuncs.com", "region": "oss-cn-beijing", "accessKeyId": "你的keyId", "accessKeySecret": "你的accessKeySecret", "bucket": "你的bucket", "ignoreImages": [ "/src/images/navigation", "/src/images/ic_back.png" ] }

4、执行上传图片命令，如下所示

npm run upload-image

5、新增、替换、删除图片

重复4步骤

注意：删除图片只会更新upload-image-record.json文件记录，并不会删除OSS的图片

6、检查是否正常运行

开发环境 运行RN服务，看是否正常运行

打release包

打包模式下看包内容是否包含图片