Webpack怎么處理圖片-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Webpack怎么處理圖片的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到安多網(wǎng)站設(shè)計(jì)與安多網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋安多地區(qū)。

從 webpack book 的 Loading Assets 一章中延申出來(lái)。

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

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

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

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

示例地址: webpack demo

開(kāi)發(fā)

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

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

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

以 demo-example 為例，Gakki.jpg 被轉(zhuǎn)化為了 base 64 編碼的圖片。在開(kāi)發(fā)階段，沒(méi)什么問(wèn)題，但是如果在實(shí)際環(huán)境中，會(huì)發(fā)現(xiàn)一個(gè)很大的問(wèn)題，將圖片越大轉(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)形式加載。那么如果超過(guò)閾值，我們?cè)撛趺崔k？

可以利用 fallback 屬性指定采用file-loader 來(lái)處理，具體見(jiàn)配置

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

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

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

優(yōu)化

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

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

控制圖片質(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 來(lái)適應(yīng)不同的屏幕

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

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

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

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

使用占位圖

與以上對(duì)比，這個(gè) loader 使用起來(lái)相對(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 }))

感謝各位的閱讀！關(guān)于“Webpack怎么處理圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：Webpack怎么處理圖片-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://bm7419.com/article8/gggip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、響應(yīng)式網(wǎng)站、ChatGPT、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容