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

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

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

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

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

示例地址: webpack demo

開發(fā)

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

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

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

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

打包

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

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

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

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

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

默認(rèn)情況下，file-loader 會返回 options 依據(jù) 文件內(nèi)容返回一個 MD5 Hash 來構(gòu)建文件名。

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

優(yōu)化

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

1. 控制圖片質(zhì)量，壓縮圖片大?。?/li>
2. 配置 <img /> 標(biāo)簽的 srcset 來適應(yīng)不同的屏幕；
3. 合成雪碧圖，減少圖片資源請求數(shù)；
4. 使用占位圖。

控制圖片質(zhì)量，壓縮圖片大小

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

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

然后運(yùn)行 npm run build ，很明顯的發(fā)現(xiàn)，圖片的大小有了明顯的變化。這種對于圖片的壓縮對于生產(chǎn)環(huán)境特別有價值，因?yàn)樗鼫p少了下載圖像資源所需的帶寬量，從而加快了站點(diǎn)或應(yīng)用程序的速度。

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

配置 <img /> 標(biāo)簽的 srcset 來適應(yīng)不同的屏幕

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

合成雪碧圖，減少圖片資源請求數(shù)

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

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

使用占位圖

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

{
  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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論