浅谈 Webpack 如何处理图片(开发、打包、优化)
作者:Yzz 时间:2024-06-14 20:48:11
从 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来做区分。
优化
为了进一步地优化体验,我们可以采用以下策略:
控制图片质量,压缩图片大小;
配置 <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,
},
},
},
],
}
然后运行 npm run build ,很明显的发现,图片的大小有了明显的变化。这种对于图片的压缩对于生产环境特别有价值,因为它减少了下载图像资源所需的带宽量,从而加快了站点或应用程序的速度。
也可以采用 imagemin-webpack-plugin 插件。
配置 <img /> 标签的 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 book
webpack doc
若干 npm readme
来源:https://juejin.im/post/5cdab246e51d453ab90871b6
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Asp 单页查询数据库
python3用PyPDF2解析pdf文件,用正则匹配数据方式
![](https://img.aspxhome.com/file/2023/8/92198_0s.jpg)
QQ在线客服网页代码大全
![](https://img.aspxhome.com/file/UploadPic/20081/17/2008117205323775s.gif)
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
![](https://img.aspxhome.com/file/2023/0/102930_0s.png)
Python实现人机中国象棋游戏
![](https://img.aspxhome.com/file/2023/9/133489_0s.jpg)
Python time.time()方法
![](https://img.aspxhome.com/file/2023/6/127276_0s.png)
解决BN和Dropout共同使用时会出现的问题
![](https://img.aspxhome.com/file/2023/9/83949_0s.png)
pycharm自动生成文件注释和函数注释
![](https://img.aspxhome.com/file/2023/3/69603_0s.jpg)
Python实现的简单hangman游戏实例
python 实现目录复制的三种小结
django 使用全局搜索功能的实例详解
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
PHP封装cURL工具类与应用示例
vue路由嵌套的SPA实现步骤
python使用socket创建tcp服务器和客户端
Python中if __name__ == "__main__"详细解释
Python PyQt5中窗口数据传递的示例详解
![](https://img.aspxhome.com/file/2023/9/114539_0s.gif)
设计需知:移动网站设计应注意的技术细节
基于Python实现文件的压缩与解压缩
![](https://img.aspxhome.com/file/2023/9/63599_0s.jpg)
Python实现仿射密码的思路详解
![](https://img.aspxhome.com/file/2023/4/115684_0s.png)