圖片不壓縮，前端要背鍋

這次要聊的主題是「圖片壓縮」。在一般頁面里面，使用最多的「靜態(tài)素材」非圖片莫屬了，這次輪到對(duì)它動(dòng)手 ?? ！

背景

??(美術(shù)): 這是這次需求的切圖 ?? ，你看看有沒問題？

?????(前端): 好的。

頁面上線 ...

?????(產(chǎn)品): 這圖片怎么半天加載不出來 ?? ？

?????(前端): 我看看 ?? (卑微)。

... ??(size: 15MB)

?????(前端): ??。

很多時(shí)候，我們從 PS 等工具導(dǎo)出來的圖片，或者是美術(shù)直接給到切圖，都是未經(jīng)過壓縮的，體積都比較大。這里，就有了可優(yōu)化的空間。

TinyPng

TinyPNG使用智能的「有損壓縮技術(shù)」來減少WEBP、JPEG和PNG文件的文件大小。通過選擇性地減少圖像中的「顏色數(shù)量」，使用更少的字節(jié)來存儲(chǔ)數(shù)據(jù)。這種效果幾乎是看不見的，但在文件大小上有非常大的差別。

使用過TinyPng^[1]的都知道，它的壓縮效果非常好，體積大幅度降低且顯示效果幾乎沒有區(qū)別( ?? 看不出區(qū)別）。因此，選擇其作為壓縮工具，是一個(gè)不錯(cuò)的選擇。

TinyPng提供兩種壓縮方法：

1. 通過在官網(wǎng)上進(jìn)行手動(dòng)壓縮；
2. 通過官方提供的tinify進(jìn)行壓縮；

身為一個(gè)程序員 ????? ，是不能接受手動(dòng)一張張上傳壓縮這種方法的。因此，選擇第二種方法，通過封裝一個(gè)工具，對(duì)項(xiàng)目內(nèi)的圖片自動(dòng)壓縮，徹底釋放雙手 ?? 。

工具類型

第一步，思考這個(gè)工具的「目的」是什么？沒錯(cuò)，「壓縮圖片」。

第二步，思考在哪個(gè)「環(huán)節(jié)」進(jìn)行壓縮？沒錯(cuò)，「發(fā)布前」。

這樣看來，開發(fā)一個(gè)webpack plugin是一個(gè)不錯(cuò)選擇，在打包「生產(chǎn)環(huán)境」代碼的時(shí)候，啟用該plugin對(duì)圖片進(jìn)行處理，完美 ?? ！

但是，這樣會(huì)面臨兩個(gè)問題 ?? ：

1. 頁面迭代，新增了幾張圖片，重新打包上線時(shí)，會(huì)導(dǎo)致舊圖片被多次壓縮；
2. 無法選擇哪些圖片要被壓縮，哪些圖片不被壓縮；

雖然可以通過「配置」的方式解決上述問題，但每次打包都要特殊配置，略顯麻煩，這樣看來plugin好像不是最好的選擇。

以上兩個(gè)問題，使用「命令行工具」就能完美解決。在打包「生產(chǎn)環(huán)境」代碼之前，執(zhí)行「壓縮命令」，通過命令行交互，選擇需要壓縮的圖片。

效果演示

話不多說，先上才藝 ?? ！

1. 安裝

$ npm i yx-tiny -D

2. 使用

$ npx tiny 

3. 根據(jù)命令行提示輸入

流程：輸入「文件夾名稱-tinyImg」，接著工具會(huì)找到當(dāng)前項(xiàng)目下所有的tinyImg，接著選擇一或多個(gè)tinyImg，緊接著，工具會(huì)找出tinyImg下所有的png、jpe?g和svga，最后選擇壓縮模式「全量」或「自定義」，選擇需要壓縮的圖片。

從最后的輸出結(jié)果可以看到，壓縮前的資源體積為2.64MB，壓縮后體積為1.02MB，足足壓縮了1.62MB ?? ！

然后再繼續(xù)執(zhí)行一遍命令再次壓縮，剛剛壓縮過的資源被識(shí)別出來，因?yàn)闆]有新增資源，所以輸出「目標(biāo)文件夾內(nèi)」找不到「可壓縮」的資源！

實(shí)現(xiàn)思路

總體分為五個(gè)過程：

1. 查找：找出所有的圖片資源；
2. 分配：均分任務(wù)到每個(gè)進(jìn)程；
3. 上傳：把原圖上傳到TinyPng；
4. 下載：從TinyPng中下載壓縮好的圖片；
5. 寫入：用下載的圖片覆蓋本地圖片；

項(xiàng)目地址：yx-tiny^[2]

查找

找出所有的圖片資源。

packages/tiny/src/index.ts

/**
 * 遞歸找出所有圖片
 * @param { string } path
 * @returns { Array<imageType> }
 */
interface IdeepFindImg {
  (path: string): Array<imageType>
}
let deepFindImg: IdeepFindImg
deepFindImg = (path: string) => {
  // 讀取文件夾的內(nèi)容
  const content = fs.readdirSync(path)
  // 用于保存發(fā)現(xiàn)的圖片
  let images: Array<imageType> = []
  // 遍歷該文件夾內(nèi)容
  content.forEach(folder => {
    const filePath = resolve(path, folder)
    // 獲取當(dāng)前內(nèi)容的語法信息
    const info = fs.statSync(filePath)
    // 當(dāng)前內(nèi)容為“文件夾”
    if (info.isDirectory()) {
      // 對(duì)該文件夾進(jìn)行遞歸操作
      images = [...images, ...deepFindImg(filePath)]
    } else {
      const fileNameReg = /\.(jpe?g|png|svga)$/
      const shouldFormat = fileNameReg.test(filePath)
      // 判斷當(dāng)前內(nèi)容的路徑是否包含圖片格式
      if (shouldFormat) {
        // 讀取圖片內(nèi)容保存到images
        const imgData = fs.readFileSync(filePath)
        images.push({
          path: filePath,
          file: imgData
        })
      }
    }
  })
  return images
}

通過命令行交互后，拿到目標(biāo)文件夾的路徑path，然后獲取該path下的所有內(nèi)容，接著遍歷所有內(nèi)容。

首先判斷該內(nèi)容的文件信息：若為“文件夾”，則把該文件夾路徑作為path，遞歸調(diào)用deepFindImg；若不為“文件夾”，判斷該內(nèi)容為圖片，則讀取圖片數(shù)據(jù)，push到images中。最后，返回所有找到的圖片。

分配

均分任務(wù)到每個(gè)進(jìn)程。

packages/tiny/src/index.ts

// ...
cluster.setupPrimary({
    exec: resolve(__dirname, 'features/process.js')
})

// 若資源數(shù)小于則創(chuàng)建一個(gè)進(jìn)程，否則創(chuàng)建多個(gè)進(jìn)程
const works: Array<{
    work: Worker;
    tasks: Array<imageType>
}> =[]
if (list.length <= cpuNums) {
    works.push({
        work: cluster.fork(),
        tasks: list
    })
} else {
    for (let i = 0; i < cpuNums; ++i) {
        const work = cluster.fork()
        works.push({
            work,
            tasks: []
        })
    }
}

// 平均分配任務(wù)
let workNum = 0 
list.forEach(task = >{
    if (works.length === 1) {
        return
    } else if (workNum >= works.length) {
        works[0].tasks.push(task)
        workNum = 1
    } else {
        works[workNum].tasks.push(task)
        workNum += 1
    }
})

// 用于記錄進(jìn)程完成數(shù)
let pageNum = works.length

// 初始化進(jìn)度條
// ...

works.forEach(({
    work,
    tasks
}) = >{
    // 發(fā)送任務(wù)到每個(gè)進(jìn)程
    work.send(tasks)
    // 接收任務(wù)完成
    work.on('message', (details: Idetail[]) = >{
        // 更新進(jìn)度條
        // ...
        pageNum--
        // 所有任務(wù)執(zhí)行完畢
        if (pageNum === 0) {
            // 關(guān)閉進(jìn)程
            cluster.disconnect()
        }
    })
})

使用cluster，根據(jù)「cpu核心數(shù)」創(chuàng)建等量的進(jìn)程，works用于保存已創(chuàng)建的進(jìn)程，list中保存的是要處理的壓縮任務(wù)，通過遍歷list，把任務(wù)依次分給每一個(gè)進(jìn)程。接著遍歷works，通過send方法發(fā)送進(jìn)程任務(wù)。通過監(jiān)聽message事件，利用pageNum記錄進(jìn)程任務(wù)的完成情況，當(dāng)所有進(jìn)程任務(wù)執(zhí)行完畢后，則關(guān)閉進(jìn)程。

上傳

官方提供的tinify工具有「500張/月」的限額，超過限額后，需要付費(fèi)。

由于家境貧寒，且出于學(xué)習(xí)的目的，就沒有使用tinify，而是通過構(gòu)造隨機(jī)IP來直接請(qǐng)求「壓縮接口」來達(dá)到「破解限額」的目的。大家在真正使用的時(shí)候，還是要使用tinyfy來壓縮，不要做這種投機(jī)取巧的事。

好了，回到正文。

把原圖上傳到TinyPng。

packages/tiny/src/features/index.ts

/**
 * 上傳函數(shù)
 * @param { Buffer } file 文件buffer數(shù)據(jù)
 * @returns { Promise<DataUploadType> }
 */
interface Iupload {
  (file: Buffer): Promise<DataUploadType>
}
export let upload: Iupload
upload = (file: Buffer) => {
  // 生成隨機(jī)請(qǐng)求頭
  const header = randomHeader()
  return new Promise((resolve, reject) => {
    const req = Https.request(header, res => {
      res.on('data', data => {
        try {
          const resp = JSON.parse(data.toString()) as DataUploadType
          if (resp.error) {
            reject(resp)
          } else {
            resolve(resp)
          }
        } catch (err) {
          reject(err)
        }
      })
    })
    // 上傳圖片buffer
    req.write(file)
    req.on('error', err => reject(err))
    req.end()
  })
}

使用node自帶的Https模塊，構(gòu)造請(qǐng)求頭，把deepFindImg中返回的圖片進(jìn)行上傳。上傳成功后，會(huì)返回已經(jīng)壓縮好的圖片的url鏈接。

下載

從TinyPng中下載壓縮好的圖片。

packages/tiny/src/features/index.ts

/**
 * 下載函數(shù)
 * @param { string } path
 * @returns { Promise<string> }
 */
interface Idownload {
  (path: string): Promise<string>
}
export let download: Idownload
download = (path: string) => {
  const header = new Url.URL(path)
  return new Promise((resolve, reject) => {
    const req = Https.request(header, res => {
      let content = ''
      res.setEncoding('binary')
      res.on('data', data => (content += data))
      res.on('end', () => resolve(content))
    })
    req.on('error', err => reject(err))
    req.end()
  })
}

使用node自帶的Https模塊把upload中返回的圖片鏈接進(jìn)行下載。下載成功后，返回圖片的buffer數(shù)據(jù)。

寫入

把下載好的圖片覆蓋本地圖片。

packages/tiny/src/features/process.ts

/**
 * 接收進(jìn)程任務(wù)
 */
process.on('message', (tasks: imageType[]) => {
  ;(async () => {
    // 優(yōu)化 png/jpg
    const data = tasks
      .filter(({ path }: { path: string }) => /\.(jpe?g|png)$/.test(path))
      .map(ele => {
        return compressImg({ ...ele, file: Buffer.from(ele.file) })
      })

    // 優(yōu)化 svga
    const svgaData = tasks
      .filter(({ path }: { path: string }) => /\.(svga)$/.test(path))
      .map(ele => {
        return compressSvga(ele.path, Buffer.from(ele.file))
      })

    const details = await Promise.all([
      ...data.map(fn => fn()),
      ...svgaData.map(fn => fn())
    ])

    // 寫入
    await Promise.all(
      details.map(
        ({ path, file }) =>
          new Promise((resolve, reject) => {
            fs.writeFile(path, file, err => {
              if (err) reject(err)
              resolve(true)
            })
          })
      )
    )

    // 發(fā)送結(jié)果
    if (process.send) {
      process.send(details)
    }
  })()
})

process.on監(jiān)聽每個(gè)進(jìn)程發(fā)送的任務(wù)，當(dāng)接收到任務(wù)類型為「圖片」，使用compressImg方法來處理圖片。當(dāng)任務(wù)類型為「svga」，使用compressSvga方法來處理svga。最后把處理好的資源寫入到本地覆蓋舊資源。

compressImg

packages/tiny/src/features/process.ts

/**
 * 壓縮圖片
 * @param { imageType } 圖片資源
 * @returns { promise<Idetail> }
 */
interface IcompressImg {
  (payload: imageType): () => Promise<Idetail>
}
let compressImg: IcompressImg
compressImg = ({ path, file }: imageType) => {
  return async () => {
    const result = {
      input: 0,
      output: 0,
      ratio: 0,
      path,
      file,
      msg: ''
    }
    try {
      // 上傳
      const dataUpload = await upload(file)

      // 下載
      const dataDownload = await download(dataUpload.output.url)

      result.input = dataUpload.input.size
      result.output = dataUpload.output.size
      result.ratio = 1 - dataUpload.output.ratio
      result.file = Buffer.alloc(dataDownload.length, dataDownload, 'binary')
    } catch (err) {
      result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`
    }
    return result
  }
}

compressImg返回一個(gè)async函數(shù)，該函數(shù)先調(diào)用upload進(jìn)行圖片上傳，接著調(diào)用download進(jìn)行下載，最終返回該圖片的buffer數(shù)據(jù)。

compressSvga

packages/tiny/src/features/process.ts

/**
 * 壓縮svga
 * @param { string } path 路徑
 * @param { buffer } source svga buffer
 * @returns { promise<Idetail> }
 */
interface IcompressSvga {
  (path: string, source: Buffer): () => Promise<Idetail>
}
let compressSvga: IcompressSvga
compressSvga = (path, source) => {
  return async () => {
    const result = {
      input: 0,
      output: 0,
      ratio: 0,
      path,
      file: source,
      msg: ''
    }
    try {
      // 解析svga
      const data = ProtoMovieEntity.decode(
        pako.inflate(toArrayBuffer(source))
      ) as unknown as IsvgaData
      const { images } = data
      const list = Object.keys(images).map(path => {
        return compressImg({ path, file: toBuffer(images[path]) })
      })

      // 對(duì)svga圖片進(jìn)行壓縮
      const detail = await Promise.all(list.map(fn => fn()))
      detail.forEach(({ path, file }) => {
        data.images[path] = file
      })

      // 壓縮buffer
      const file = pako.deflate(
        toArrayBuffer(ProtoMovieEntity.encode(data).finish() as Buffer)
      )
      result.input = source.length
      result.output = file.length
      result.ratio = 1 - file.length / source.length
      result.file = file
    } catch (err) {
      result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`
    }
    return result
  }
}

compressSvga的「輸入」、「輸出」和compressImg保持一致，目的是為了可以使用promise.all同時(shí)調(diào)用。在compressSvga內(nèi)部，對(duì)svga進(jìn)行解析成data，獲取到svga的圖片列表images，接著調(diào)用compressImg對(duì)images進(jìn)行壓縮，使用壓縮后的圖片覆蓋data.images，最后再把data編碼后，寫入到本地覆蓋原本的svga。

最后

再說一遍，大家真正使用的時(shí)候，要使用官方的tinify進(jìn)行壓縮。

參考文章：

• protobuf.js^[3]
• SVGAPlayer-Web-Lite^[4]
• tinify^[5]

參考資料