小程序-圖片/文件本地緩存，減小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）