淺談 Webpack 如何處理圖片(開發、打包、優化)

2019-11-19 11:34:16

字體：大中小

來源：轉載

供稿：網友

從 webpack book 的 Loading Assets 一章中延申出來。

改善前端項目體驗中，很重要的點就是靜態資源的優化。它是由于瀏覽器客戶端在同一時間針對同一域名的請求有一定資源限制。如果資源過多、過大就會使得頁面卡頓。

靜態資源中，又以圖片最為典型。那么我們在開發中該如何處理圖片呢？

webpack 是前端較為常用的手腳架工具，本文以它為例。

主要分為開發、打包、優化三個方面來介紹

示例地址: webpack demo

開發

webpack 可以用使用url-loader 將靜態圖片轉化為 base64 編碼的字符串，并內聯在對應的腳本中。大幅度地較少了頁面的請求數，所以在開發階段可以無限制地使用。具體方法

// npm install url-loader --save-devrules: [{  test: //.(png|jpg)$/,  use: {    loader: 'url-loader',  },}]

以 demo-example 為例，Gakki.jpg 被轉化為了 base 64 編碼的圖片。在開發階段，沒什么問題，但是如果在實際環境中，會發現一個很大的問題，將圖片越大轉化為base 64 編碼的字符串就越長，將會導致整個 Js 腳本的大小飆升。

打包

為了減小腳本的大小，我們需要告訴 webpack 什么情況下采用 url-loader 去內聯圖片，什么情況下采用其他的 loader。所以首先需要對 url-loader 進行配置

rules: [{  test: //.(png|jpg)$/,  use: {    loader: 'url-loader',   options: {      limit: 15000,      name: '[name].[ext]',    },  },}]

在 options 中設定一個閾值屬性 limit: 15000 ，表明當圖片小于該閾值 15kb 時，采用內聯形式加載。那么如果超過閾值，我們該怎么辦？

可以利用 fallback 屬性指定采用file-loader 來處理，具體見配置

options: {  limit: 15000, fallback: 'file-loader',  name: 'images/[name].[hash].[ext]',},

默認情況下，file-loader 會返回 options 依據文件內容返回一個 MD5 Hash 來構建文件名。

如果同時需要 file-loader 與 url-loader 的情況，需要設置 limit來做區分。

優化

為了進一步地優化體驗，我們可以采用以下策略：

控制圖片質量，壓縮圖片大??；
配置 <img /> 標簽的 srcset 來適應不同的屏幕；
合成雪碧圖，減少圖片資源請求數；
使用占位圖。

控制圖片質量，壓縮圖片大小

為了和 url-loader 配合，引入image-webpack-loader ，同時配置圖片的 loader

{  test: //.(png|jpg)$/,  use: [    {      loader: 'url-loader',      // 同上      options,    },    {      loader: 'image-webpack-loader',      // 配置不同圖片的質量      options: {        mozjpeg: {          progressive: true,          quality: 65,        },        optipng: {          enabled: true,        },        pngquant: {          quality: '65-90',          speed: 4,        },        gifsicle: {          interlaced: false,        },        webp: {          quality: 75,        },      },    },  ],}

然后運行 npm run build ，很明顯的發現，圖片的大小有了明顯的變化。這種對于圖片的壓縮對于生產環境特別有價值，因為它減少了下載圖像資源所需的帶寬量，從而加快了站點或應用程序的速度。

也可以采用 imagemin-webpack-plugin 插件。

配置 <img /> 標簽的 srcset 來適應不同的屏幕

resize-image-loader 和responsive-loader 可以生成 srcset 的圖片合集，可以在現代游覽器上獲得更好地體驗，同時可以更好地控制瀏覽器加載哪些圖像以及何時獲得更高的性能。

合成雪碧圖，減少圖片資源請求數

Spriting技術允許將多個較小的圖像組合成單個圖像。它對于Web開發很有價值，同時也避免了請求開銷。

webpack-spritesmith 能夠生成雪碧圖和 Sass / Less / Stylus mixins。必須設置 SpritesmithPlugin，將其指向目標圖像，并設置生成的mixin的名稱。

使用占位圖

與以上對比，這個 loader 使用起來相對復雜，它加載圖像并將其轉化為 image / svg + xml URL 編碼數據。通常它可以與file-loader和url-loader一起使用，以便在加載實際圖像時顯示占位符。配置為

{  test: //.(gif|png|jpe?g)$/i,    use: [      {        loader: 'image-trace-loader'      },      {        loader: 'url-loader',        options: {          limit: 8192        }      }    ]}

這樣，你在 loader 圖片時，就會獲得

// src 為圖片，trace 為loader生成的占位圖import { src, trace } from './assets/images/gakki-363kb.jpg'// 定義圖片組件為export const img = ({ src, trace }) => {  const img = new Image()  img.src = trace  img.onload = function () {     img.src = src  }    return img}// 掛載在 document.body 上document.body.appendChild(img({ src, trace }))

參考：