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

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

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

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

主要分為 開發(fā) 、 打包 、 優(yōu)化 三個方面來介紹

示例地址: webpack demo

開發(fā)

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

// npm install url-loader --save-dev

rules: [{
  test: /\.(png|jpg)$/,
  use: {
    loader: 'url-loader',
  },
}]

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

打包

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

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

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

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

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

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

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

優(yōu)化

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

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

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

為了和 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 ，很明顯的發(fā)現，圖片的大小有了明顯的變化。這種對于圖片的壓縮對于生產環(huán)境特別有價值，因為它減少了下載圖像資源所需的帶寬量，從而加快了站點或應用程序的速度。

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

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

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

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

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

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 }))

參考：

• webpack book
• webpack doc
• 若干 npm readme

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論