專案效能優化之用url-loader把小圖片轉base64，大圖片使用image-webpack-loader壓縮

水冗水孚發表於2022-06-27
優化Web

問題描述

專案中常常會引入一些圖片資源，什麼jpg|jpeg|png|gif|ico之類的，正常情況下，我們需要做一下效能優化，看看如何大而化小、小而化了，提升生產環境資源載入速度。所以，本文記錄一下大圖片使用image-webpack-loader外掛壓縮一下、小圖片使用url-loader轉成base64格式，並比較前後優化差別。以下程式碼是筆者在生產環境使用的，親測有效。大家直接複製貼上即可

url-loader的使用

首先，url-loader和image-webpack-loader都依賴於file-loader，file-loader簡言之就是一個資源載入模組，去找檔案資源的loader，然後也可以給靜態資源生成雜湊值，即唯一標識身份證。一般不用配置。我們主要是通過url-loader和image-webpack-loader做相關對應項配置

下載url-loader和file-loader

cnpm i url-loader file-loader --save

使用url-loader轉base64截圖

未使用url-loader就是普通的圖片載入，這裡不贅述。我們主要是看轉成base64的效果；因為下方還要說image-webpack-loader，所以程式碼放在最後

image-webpack-loader的使用

下載image-webpack-loader

這裡大家注意，不要使用高版本的image-webpack-loader，否則可能出現錯誤，這裡我使用的是6.0.0版本，大家可以使用這個版本。另外file-loader因為之前安裝過了，所以，這裡就不用安裝了

cnpm i image-webpack-loader@6.0.0 --save

未使用image-webpack-loader截圖

使用image-webpack-loader截圖

對比兩個圖，我們可以看到使用image-webpack-loader壓縮後，無論是大小還是載入時間，都優化了不少，所以這個loader還是可以的

兩個loader的完整程式碼

以vue專案為例，在vue.config.js的chainWebpack加上以下程式碼即可

chainWebpack(config) {
    config.module.rule("images").test(/\.(jpg|jpeg|png|gif|ico)$/) // 給這些圖片型別做壓縮
        .use("url-loader") // url-loader要搭配file-loader做圖片壓縮
        .loader("url-loader")
        .options({
            limit: 1024 * 12,// 小於12kb的圖片壓縮成base64，圖片太大轉成base64反而不太合適
            name: "static/img/[name].[ext]"//指定打包後的圖片存放的位置，一般放在static下img資料夾裡 name.ext分別為：檔名.檔案字尾（按照原圖片名）
        })
        .end() // 返回上一級 以便於繼續新增loader
        .use('image-webpack-loader')
        .loader("image-webpack-loader")
        .options({
            disable: process.env.NODE_ENV == 'development' ? true : false, // 開發環境禁用壓縮，生產環境才做壓縮，提升開發除錯速度
            mozjpeg: { quality: 60 }, // 壓縮JPEG影像，壓縮質量quality為60，範圍0到100
            optipng: { enabled: true }, // 壓縮PNG影像，enabled為true開啟壓縮
            pngquant: { quality: [0.65, 0.90], speed: 4 }, // 質量區間和速度就使用預設值吧
            gifsicle: { interlaced: false }, // Interlace gif for progressive rendering 預設false
            webp: { quality: 60 } // 壓縮webp圖片，壓縮質量quality為60，範圍0到100
        })
        .end() // 返回上一級 繼續新增loader
        .enforce('post') // 表示先執行配置在下面那個loader，即image-webpack-loader
},

總結

詳細配置項，要去npm或者github看看。不過上述普通配置項，基本上能解決大多數需求，勉強夠用了

好記性，不如爛筆頭，記錄一下吧 ^_^

相關文章