Vite插件：自動打包壓縮圖片和轉webp
作者：阿帕琪爾
最近寫頁面的時候，用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, () => {})
...
})
}
}效果
這里就爬幾張原神的圖片展示了(原神,啟動!!)
開發環境: 
生產環境:
總結
- 以上就是大致思路了，代碼僅供參考
- GitHub: vite-plugin-image-tools[2]
- 后續打算繼續維護這個倉庫并更新更多圖片相關功能的，有問題歡迎提issue呀~
原文: https://juejin.cn/post/7489043337288794139
參考資料
責任編輯：龐桂玉
來源：
web前端進階
