小程序體積優化(2)--優化圖片

經過對大致積文本的優化，總的體積減小了不到100KB，能夠說是杯水車薪，看來仍是要從大戶圖片上面下手，分三個方向去處理:

1. 清理未使用的圖片
2. 壓縮圖片
3. 修改部分設計

清理未使用的圖片

由於小程序的css文件內不容許使用本地圖片，因此只須要查找html裏面的引入的圖片地址，再加上tab中定義的圖標。以 wepy 構建的項目爲例，首先，獲取頁面上使用了哪些圖片：

/**
 * 讀取pages目錄下面的頁面文件
 *
 * @returns {Promise} 讀取到的.wpy文件
 */
function getPages() {
  return new Promise((resolve, reject)=>{
    fs.readdir(path.resolve('../src/pages/'), (err, files)=>{
      if(err){
        reject(err)
      }
      resolve(files)
    })
  })
}

/**
 * 從頁面字符串中提取圖片
 *
 * @param {string} fileName 頁面文件名字
 * @returns {Promise} 頁面提取出的圖片 src 數組
 */
function getImagesFormPages(fileName) {

  return new Promise((resolve, reject)=>{
    fs.readFile(path.join('../src/pages/', fileName), (err, data)=>{
      if(err){
        reject(err)
      }
      let fileData = data.toString();
      let imgReg = /<image.*?(?:>|\/>)/gim;
      var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      let images = fileData.match(imgReg)
      let imagePathArray = null;
      if(images){
        imagePathArray = images.map(item=>{
          var src = item.match(srcReg);
          return src[1]
        })
      }
      resolve({
        fileName: fileName,
        fileData: imagePathArray
      })
    })
  })
}


/**
 * 從頁面中獲取圖片
 *
 * @returns
 */
async function getUsedImages () {
  let pages = await getPages();

  let data = await Promise.all(pages.map(page=>{
    return getImagesFormPages(page)
  }))

  return data
}

再加上tab中定義的圖標

const tabImages = [
  '../images/icon_st_nor@2x.png',
  '../images/icon_st_sel@2x.png',
  '../images/icon_tk_nor@2x.png',
  '../images/icon_tk_sel@2x.png',
  '../images/icon_wd_nor@2x.png',
  '../images/icon_wd_sel@2x.png',
];

再獲取資源文件夾下面的所有圖片

/**
 * 獲取資源文件夾下面的圖片
 *
 * @returns
 */
function getAssets(){
  return new Promise((resolve, reject)=>{
    glob("../src/images/**/*.{png,jpg}", {}, function (err, files) {
      if(err){
        reject(err)
      }
      resolve(files);
    })
  })
}

再進行一個比對，把在資源目錄，而不在html和tab中使用的圖片，移動到外部文件夾裏面去

const fs = require('fs')
const path = require('path')
const glob = require("glob")

let find = async ()=>{
  // 查找資源目錄下的圖片
  let allImages = await getAssets();

  // 查找模板中引用的圖片
  let usedImages = await getUsedImages();

  usedImages = usedImages
  .filter(i=>i.fileData) // 提取圖片數組
  .reduce((a,b)=>a = a.concat(b.fileData), []) // 轉化爲一維數組
  .filter(i=>i.charAt(0)!=='{') // 刪除無效圖片
  .map(i=>path.resolve('../src/pages/', i)) // 處理圖片路徑

  return allImages.filter(image=>{
    return usedImages.indexOf(path.resolve('', image)) === -1
  })
}

find().then(data=>{
  // 找到未使用的圖片，移動到外部文件夾，避免再次打包
  if(!fs.existsSync('../un-use-images')){
    fs.mkdirSync('../un-use-images', 0777);
  }

  data.forEach(file=>{
    let name = file.split('/').pop();
    fs.writeFileSync('../un-use-images/'+name, fs.readFileSync(file));
    fs.unlinkSync(file);
  })

})

壓縮圖片

能夠經過 imagemin 庫或者軟件對圖片文件進行批量壓縮，我測驗的結果是從1.08MB圖片壓縮到了648KB，效果很是的顯著。

修改設計

從設計層面也能夠減小很多圖片的使用，好比等級從lv1-lv9, 若是設計爲反色鏤空，用背景色來區分等級，那麼最多能夠節約8張圖片。

尾聲

其實圖片文件經過手動的方式清理和壓縮很是的不方便，可是小程序自己和wepy都沒有提供按引入文件打包的功能，接下來我會嘗試用 mpvue 重構代碼，看能不能作到自動化。