浅谈 Webpack 如何处理图片(开发、打包、优化)

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

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

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

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

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

示例地址: webpack demo

开发

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

// npm install url-loader --save-devrules: [{  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来做区分。

优化

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

控制图片质量，压缩图片大小； 配置 <img /> 标签的 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,        },      },    },  ],}