小程序-图片/文件本地缓存，减少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）