Webpack怎么处理图片-创新互联

这篇文章给大家分享的是有关Webpack怎么处理图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到安多网站设计与安多网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、网络空间、企业邮箱。业务覆盖安多地区。

从 webpack book 的 Loading Assets 一章中延申出来。

改善前端项目体验中，很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一域名的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。

静态资源中，又以图片最为典型。那么我们在开发中该如何处理图片呢？

webpack 是前端较为常用的手脚架工具，本文以它为例。

主要分为开发、打包、优化三个方面来介绍

示例地址: webpack demo

开发

webpack 可以用使用url-loader 将静态图片转化为 base64 编码的字符串，并内联在对应的脚本中。大幅度地较少了页面的请求数，所以在开发阶段可以无限制地使用。具体方法

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

rules: [{
  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来做区分。

优化

为了进一步地优化体验，我们可以采用以下策略：

控制图片质量，压缩图片大小；
配置标签的 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 插件。

配置标签的 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 }))

感谢各位的阅读！关于“Webpack怎么处理图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

名称栏目：Webpack怎么处理图片-创新互联
链接URL：http://mswzjz.cn/article/gggip.html

网站建设知识

Webpack怎么处理图片-创新互联

其他资讯