Vite插件：自動打包壓縮圖片和轉webp

作者：阿帕琪爾 2025-04-09 01:50:00

開發

最近寫頁面的時候，用webp優化圖片大小，就想著有沒有相關插件可以開發和打包的時候自動幫我轉化和壓縮。因為用vite打包工具，就去社區找相關插件，可沒找到一個比較符合我要求的，就打算自己工作摸魚寫一個吧。

倉庫

github: github.com/illusionGD/…^[1]

需求

能壓縮圖片，壓縮質量能配置
能自動轉webp格式，并且打包后能把圖片引用路徑的后綴改成.webp
支持開發環境和生產環境
不影響原項目圖片資源，開發要無感，使用簡單

技術棧

sharp：圖片壓縮、格式轉換
@vitejs/plugin-vue：vite插件開發

實現思路

生產環境

生產環境要考慮兩個功能：
1、壓縮圖片：這個比較簡單，在generateBundle鉤子函數里面處理圖片的chunk中的buffer就可以了

export default function ImageTools() {
    return {
        // hook
      async  generateBundle(_options, bundle) {
          for (const key in bundle){
              // 過濾圖片key
              const { ext } = parse(key)
              if (!/(png|jpg|jpeg|webp)$/.test(ext)) {
                  continue
              }
              
              // 處理圖片buffer
              if (chunk.source && chunk.source instanceof Buffer) {
                   // 壓縮圖片，這里就省略邏輯了，可以去看sharp文檔
                  const pressBuffer = await pressBufferToImage(chunk.source) 
                  // 替換處理后的buffer
                  chunk.source = pressBuffer
                }
          }
      }
    }
}

2、轉webp格式: 還是在generateBundle中，直接copy一份圖片的chunk，替換chunk的source和fileName，再添加到bundle中輸出

export default function ImageTools() {
    return {
        // hook
      async  generateBundle(_options, bundle) {
          for (const key in bundle){
              // 過濾圖片key
              ...
              // 處理圖片buffer
              ...
              
              /*webp相關邏輯*/
              // 克隆原本的chunk
              const webpChunk = structuredClone(chunk)
              // 生成webp的buffer, 邏輯省略
              const webpBuffer = await toWebpBuffer(chunk.source)
              
              // 更改新chunk的source和fileName
              webpChunk.source = webpBuffer
              
              const ext = extname(path)
              const webpName = key.replace(ext, '.wep')
              webpChunk.fileName = webpName
              
              // 添加到bundle中
              bundle[webpName] = webpChunk
          }
      }
    }
}

3、**替換路徑后綴為.webp**：這里就有點麻煩，需要考慮圖片的引入方式和打包的產物，解析產物去替換了

引入方式：

css：background、background-image
組件、html文件中的標簽：img、source、<div style="background-image: url('')"></div>、<div style="background: url('')"></div>
import：import 'xxx/xxx/xx.png'

產物, 以vue為例：
css中引入的，打包后還是在css中組件中的標簽引入，打包后是在js中

html文件中的標簽：就在html中

知道產物后就比較好替換了，我這里采用一種比較巧妙的方法，不需要轉ast就能精準替換路徑后綴:
先在generateBundle中收集打包后圖片的名稱和對應的webp名稱:

再替換上述產物文件中的圖片后綴:

function handleReplaceWebp(str: string) {
  let temp = str
  for (const key in map) { // 這里的map就是上述圖片中的對象
    temp = temp.replace(new RegExp(key, 'g'), map[key])
  }
  return temp
}
export default function ImageTools() {
    return {
        // hook
      async  generateBundle(_options, bundle) {
          for (const key in bundle){
              // 過濾圖片key
              ...
              // 處理圖片buffer
              ...
              // 替換js和css中的圖片后綴
             if (/(js|css)$/.test(key) && enableWebp) {
              if (/(js)$/.test(key)) {
                chunk.code = handleReplaceWebp(chunk.code)
              } else if (/(css)$/.test(key)) {
                chunk.source = handleReplaceWebp(chunk.source)
              }
            }
          }
      },
      
      // 替換html中的圖片后綴
      async writeBundle(opt, bundle) {
          for (const key in bundle) {
            const chunk = bundle[key] as any
            if (/(html)$/.test(key)) {
              const htmlCode = handleReplaceWebp(chunk.source)
              writeFileSync(join(opt.dir!, chunk.fileName), htmlCode)
            }
          }
        }
    }
}

好了，這就是生產環境大概實現思路了，接下來看開發環境中如何轉webp

開發環境

有人可能認為，開發環境并不需要壓縮和轉webp功能，其實不然，開發環境主要是為了看圖片處理后的效果，是否符合預期效果，不然每次都要打包才能看，就有點麻煩了.

開發環境主要考慮以下兩點:

和生產環境一樣，需要做壓縮和轉webp處理
需要加入緩存，避免每次熱更都進行壓縮和轉webp

壓縮和轉webp處理
這里就比較簡單了，不需要處理bunlde，在請求本地服務器資源hook中(configureServer) 處理并返回圖片資源就行:

export default function ImageTools() {
    return {
        // hook
     configureServer(server) {
         server.middlewares.use(async (req, res, next) => {
            if (!filterImage(req.url || '')) return next()

            try {
              const filePath = decodeURIComponent(
                path.resolve(process.cwd(), req.url?.split('?')[0].slice(1) || '')
              )
                
              // 過濾圖片請求
              ...
              
              const buffer = readFileSync(filePath)
              // 處理圖片壓縮和轉webp,返回新的buffer,邏輯省略
              const newBuffer = await pressBufferToImage(buffer)
             
              if (!newBuffer) {
                next()
              }

              res.setHeader('Content-Type', `image/webp`)
              res.end(newBuffer)
            } catch (e) {
              next()
            }
          })
    }
}

緩存圖片
這里的思路:

第一次請求圖片時，緩存對應圖片的文件，并帶上hash值
每次請求時都對比緩存文件的hash，有就返回，沒有就繼續走圖片處理邏輯

詳細代碼就不貼了，這里只寫大概邏輯

export function getCacheKey({ name, ext, content}: any, factor: AnyObject) {
  const hash = crypto
    .createHash('md5')
    .update(content)
    .update(JSON.stringify(factor))
    .digest('hex')
  return `${name}_${hash.slice(0, 8)}${ext}`
}

export default function ImageTools() {
    return {
        // hook
     configureServer(server) {
         server.middlewares.use(async (req, res, next) => {
            if (!filterImage(req.url || '')) return next()

            try {
              const filePath = decodeURIComponent(
                path.resolve(process.cwd(), req.url?.split('?')[0].slice(1) || '')
              )
                
              // 過濾圖片請求
              ...
              const { ext, name } = parse(filePath)
              const file = readFileSync(filePath)
              // 獲取圖片緩存的key,就是圖片hash的名稱
              const cacheKey = getCacheKey(
                {
                  name,
                  ext,
                  content: file
                },
                { quality, enableWebp, sharpConfig, enableDevWebp, ext } // 這里傳生成hash的因子,方便后續改配置重新緩存圖片
              )
              const cachePath = join('node_modules/.cache/vite-plugin-image', cacheKey)

              // 讀緩存
              if (existsSync(cachePath)) {
                return readFileSync(cachePath)
              }
             
              // 處理圖片壓縮和轉webp,返回新的buffer
              const buffer = readFileSync(filePath)
              // 處理圖片壓縮和轉webp,返回新的buffer,邏輯省略
              const newBuffer = await pressBufferToImage(buffer)
              // 寫入緩存
              writeFile(cachePath, newBuffer, () => {})
              ...
          })
    }
}