【微信小程序】CDN流量消耗像火箭一样过于快？经验教训总结。

开发了几个月的小程序上线了，心情很忐忑，知道一定会出现不可预知的问题，没想到上线不到两小时就爆了。之前一直很注意数据库调用次数，很怕这里超出云开发月租额度，结果调用次数倒还好，之前没注意到的CDN流量爆炸了。额度5个G，这么一会儿直接35个G以上了，谁懂这种感觉…
经过处理后，从人均30MB又滑到了人均2MB（我小程序图片比较多）。

好了，总结一下控制CDN流量使用量的方法吧。
关键就两点：压缩图片大小 + 一张图片尽可能减少请求次数。

一、压缩图片

这是最根本的措施，图片资源太大，代码敲冒烟都救不了。
jpg直接微信上倒一圈就压缩好了。
png在这个网站上压缩一下：https://compresspng.com/zh/

二、减少图片请求次数

在图片被压缩过的基础上，将图片在第一次请求后保存在本地，设置个有效时限，在这期间再加载这张图片直接从本地拉取，不再发起请求。

let homeTopBgStoragePath = wx.getStorageSync('homeTopBgStoragePath')
    if(homeTopBgStoragePath) {  //这里可以再加个时间判断资源存在的同时过期没
      this.setData({
        homeTopBgStoragePath: homeTopBgStoragePath
      })
    }else {
      wx.downloadFile({  //下载图片资源
        url: 'xxx',
        success: res => {
          if(res.statusCode === 200) {
            const fs = wx.getFileSystemManager()
            fs.saveFile({  //临时文件保存到本地
              tempFilePath: res.tempFilePath,
              success: res => {
                wx.setStorageSync('homeTopBgStoragePath', res.savedFilePath)  //保存资源路径，这里可以再设置个资源过期时间
                this.setData({
                  homeTopBgStoragePath: res.savedFilePath
                })
              }
            })
          }
        }
      })
    }

一定要做好CDN流量的预处理，要不然消耗的都是白花花的银子啊。