uniapp使用COS存储静态资源

为什么要使用COS存储

如果将所有的静态资源都放在uniapp项目中，会导致以下问题

打包体积增大：将所有的静态资源都打包到项目中，会增加项目的总体积，小程序的总体积增大，会导致小程序的安装包变得非常大,会影响用户的安装时间
首次加载时间变长：首次加载需要下载打包的静态资源，大量的静态资源下载会占用大量的时候,导致加载时间变长
更新问题：所有的静态资源都放在本地文件中，如果需要更新莫个静态资源，就需要本地替换后，重新打包部署
设备存储问题：大量的静态资源会占用使用者设备的存储空间

为了避免这些问题，可以使用以下方法优化：

使用远程资源：将静态资源存放在远程服务器上，例如使用 cos 或云存储服务。这样可以减轻小程序的打包体积，并且可以通过远程更新资源，而不需要重新发布整个小程序
按需加载：将静态资源按需加载，而不是一次性加载全部资源。根据用户的实际使用情况，动态加载所需的资源，以减少初始加载所需的时间和带宽消耗
分包加载：如果小程序中的静态资源较多，可以将部分资源拆分为独立的分包。这样可以根据用户的需求进行分包的按需加载，减少初始加载所需的时间
压缩和优化资源：我们在开发前就会去约定，PC端单张图片不允许超过500KB，移动端不超过200KB。如超过，开发自行压缩图片压缩

我们开发的代码仓库是使用的腾讯的coding，所有我们静态资源就使用了腾讯云的COS

对象存储工具

工具	功能说明
COSBrowser 工具	本工具支持用户通过可视化界面，方便地进行数据的上传、下载、生成访问链接等操作。
COSCMD 工具	本工具支持用户使用简单的命令行指令实现对对象的批量上传、下载、删除等操作。

更多工具详见官网

安装和使用

COSBrowser

通过云 API 密钥（即 SecretID、SecretKey）进行登录使用，该密钥可在访问管理控制台的 API 密钥管理页面中创建并获取，成功登录后密钥将保存在历史会话中，方便下次继续使用，软件登录界面如下所示。其他配置项说明如下：

存储桶/访问路径：若当前使用的密钥其被主账号允许访问的范围只有存储桶或存储桶下某个目录的权限，那么此项必填。填写后可快速进入对应的文件路径。格式为：Bucket 或 Bucket/Object-prefix，例如当前使用的密钥仅被允许访问存储桶 examplebucket-1250000000 下的 doc 文件夹，则填 examplebucket-1250000000/doc。
备注：可对当前填入的永久密钥进行说明。例如操作人员、用途等。在历史密钥界面中管理历史会话时可区分不同的 SecretID。
记住会话：若不勾选，则仅本次登录有效，退出登录则会清空填入的云 API 密钥（如果当前密钥已保存在历史会话中，则会从历史会话中移除）；若勾选，则会记住填入的云 API 密钥，并可在历史会话中进行管理。

COSCMD

通过pip安装
js 复制代码
```
pip install coscmd
```
安装成功之后，用户可以通过 -v 或者 --version 命令查看当前的版本信息。

参数配置

js 复制代码

coscmd config -a AChT4ThiXAbpBDEFGhT4ThiXAbp**** -s WE54wreefvds3462refgwewe**** -b configure-bucket-1250000000 -r ap-chengdu

静态资源自动更新

用户可以通过文件同步功能，将指定本地文件夹中的文件自动实时地上传或者定时上传至存储桶中，但是客户端仅支持将本地文件夹同步至存储桶目录，我们如果想实现资源更新到git仓库之后，就自动上传到cos存储桶，应该怎么实现呢？这里有两种方案可以实现自动同步的功能

coding自带的持续集成

Jenkinsfile配置

javascript 复制代码

pipeline {
agent any
stages {
    stage('检出') {
    steps {
        checkout([$class: 'GitSCM',
        branches: [[name: GIT_BUILD_REF]],
        userRemoteConfigs: [[
        url: GIT_REPO_URL,
        credentialsId: CREDENTIALS_ID
        ]]])
    }
    }

    stage('上传到 COS Bucket') {
    steps {
        sh "coscmd config -a ${COS_SECRET_ID} -s ${COS_SECRET_KEY} -b ${COS_BUCKET_NAME} -r ${COS_BUCKET_REGION}"
        // 如果要给上传的文件重命名 需要使用mv
        // sh "mv ./mp_assets/  /test "
        // sh 'coscmd upload -r /test /'
        sh " echo 'y' | coscmd upload -rs --skipmd5 --delete ./mp_assets/ /mp_assets"
        echo "上传成功"
    }
    }

}
}

触发规则
变量与缓存需要配置COS_SECRET_KEY、COS_SECRET_ID、COS_BUCKET_NAME、COS_BUCKET_REGION基本信息

coding云原生构建

yml文件配置

javascript 复制代码

master:
push:
    - runner:
        cpus: 1
        affinity: true
    docker:
        image: python:3.11.0
        volumes:
        - /root/.cache/pip:copy-on-write
    imports:
        - ./.coding-ci.env.yml   # 通过 `imports` 的方式来注入环境变量
    stages:
        - name: python版本
        script: python --version
        - name: pip 版本
        script: 
            - pip --version
            - echo $cos_secret_id
        - name: coscmd 下载
        script: pip install coscmd -i https://mirrors.tencentyun.com/pypi/simple/
        - name: '配置 COS 基本信息'
        script: coscmd config -a $cos_secret_id -s $cos_secret_key -b $cos_bucket -r $cos_region
        - name: 上传 COS
        script:  echo 'y' | coscmd upload -rs --skipmd5 --delete ./mp_assets/ /mp_assets

总结

不管是使用云原生构建还是CODING自带的持续集成，都可以实现自动同步的功能。使用 COS 对小程序有助于提高可靠性、性能和可扩展性，同时节省成本和简化管理。通过将小程序的静态资源放置在 COS 上，可以更好地满足用户的需求，并提供良好的用户体验