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

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

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

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

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

示例地址: webpack demo

開發(fā)

webpack 可以用使用url-loader  將靜態(tài)圖片轉(zhuǎn)化為 base64 編碼的字符串，并內(nèi)聯(lián)在對(duì)應(yīng)的腳本中。大幅度地較少了頁(yè)面的請(qǐ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)境中，會(huì)發(fā)現(xiàn)一個(gè)很大的問題，將圖片越大轉(zhuǎn)化為base 64 編碼的字符串就越長(zhǎng)，將會(huì)導(dǎo)致整個(gè) Js 腳本的大小飆升。

打包

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

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

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

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

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

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

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

優(yōu)化

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

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

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

為了和 url-loader 配合，引入image-webpack-loader ，同時(shí)配置圖片的 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)，圖片的大小有了明顯的變化。這種對(duì)于圖片的壓縮對(duì)于生產(chǎn)環(huán)境特別有價(jià)值，因?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í)可以更好地控制瀏覽器加載哪些圖像以及何時(shí)獲得更高的性能。

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

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

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

使用占位圖

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

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

這樣，你在 loader 圖片時(shí)，就會(huì)獲得

// 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

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

最新評(píng)論