Image-oss-optimization-plugin NPM

概述

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

本项目主要实现两个功能

1、将本地图片上传至CDN

2、利用babel及AST抽象树，动态将本地资源替换为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"
  ]
}

参数	说明
ossHost	图片访问地址，访问地址+md5能访问到，如https://my.oss-cn-beijing.aliyuncs.com/4a8da6930cae6e4cae54d7bae3498fbc.png
region	yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou
accessKeyId	阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户
accessKeySecret	阿里云账号accessKeySecret
bucket	阿里云Bucket名称
ignoreImages	忽略文件，支持文件夹或文件，即不上传到OSS