小程序-图片/文件本地缓存，减小CDN流量消耗

♠ 写在前面

小程序网络图片读取：

1. 在读取OSS图片CDN分发时流量大量消耗，致使资金费用增长。
2. 网络图片比较大时，图片加载缓慢。

为了尽可能减小上面两个问题，因此对已读的图片进行缓存处理，减小屡次访问没必要要的流量消耗。

♠ 小程序的文件系统

文件主要分为两大类：

• 代码包文件：代码包文件指的是在项目目录中添加的文件。
• 本地文件：经过调用接口本地产生，或经过网络下载下来，存储到本地的文件。

其中本地文件又分为三种：

1. 本地临时文件：临时产生，随时会被回收的文件。不限制存储大小。
2. 本地缓存文件：小程序经过接口把本地临时文件缓存后产生的文件，不能自定义目录和文件名。跟本地用户文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB。
3. 本地用户文件：小程序经过接口把本地临时文件缓存后产生的文件，容许自定义目录和文件名。跟本地缓存文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB。

而咱们要使用的文件缓存方式就是 本地临时文件 。

♠ 实现原理

图片缓存流程：

1. 将要图片/文件经过wx.downloadFile(Object object)下载到本地，成为本地临时文件。
2. 使用小程序的Storage记录网络地址和本地地址，作映射。
3. 使用时，在Storage读取映射表。若是存在本地文件，并经过FileSystemManager.accessSync(string path)判断文件存在，则读取本地地址；不存在，删除该映射。

♠ 注意

• 图片缓存只针对屡次访问的图片，请按照实际状况调用。若是访问一次的也作，CDN流量消耗反倒翻倍，得不偿失。
• 小程序缓存最大10M。为防止将缓存写满，小程序初始化时，若是超过1000条，清空缓存记录，从新开始。
• 1000条。该数不是固定数字，请根据本身的实际状况自定。若是你自己就会往Storage放数据，请自行判断须要多少条，不要致使其余数据没法存入，影响其余功能正常使用。
• 为何不用LRU最近使用删除？不必。1000自己是个虚数，留存1~2M作其余代码备用，而文件异步保存，自己会致使有好多文件没法检测到，若是经过循环去判断最近时间，太耗费性能，还不如进入小程序时，直接清空，从头开始。小程序自己是轻量级的，一段时间清空一次便可。

♠ 代码

const fileSystem = wx.getFileSystemManager()

const getStorageImage = (web_image) => {
  let webImages = wx.getStorageSync('webImages') || []
  let webImage = webImages.find(y => y.web_path === web_image)
  if (webImage) {
    try {
      fileSystem.accessSync(webImage.local_path)
      return webImage.local_path
    } catch(e) { 
      let webImageIdx = webImages.findIndex(y => y.web_path === web_image)
      webImages.splice(webImageIdx, 1)
      wx.setStorageSync('webImages', webImages)
    }
  } else {
    wx.downloadFile({
      url: web_image,
      success (res) {
        if (res.statusCode === 200) {
          let filePath = res.tempFilePath
          let webImageStorage = wx.getStorageSync('webImages') || []
          let storage = {
            web_path: web_image,
            local_path: filePath,
            last_time: Date.parse(new Date()),
          }
          webImageStorage.push(storage)
          wx.setStorageSync('webImages', webImageStorage)
        }
      }
    })
  }
  return web_image
}

module.exports = {
  getStorageImage
}

♠ 写在后面

本文参照博客

• https://juejin.im/post/5b42d3ede51d4519277b6ce3

---

（幽蛰 写于 2020.06.10）