Webpack5 生产模式压缩图片ImageMinimizerPlugin
文章目录
- 一、 ImageMinimizerPlugin是什么?
- 二、已经有了asset,为什么需要ImageMinimizerPlugin?
- 三、怎么使用ImageMinimizerPlugin?
- 四、ImageMinimizerPlugin压缩的成果
一、 ImageMinimizerPlugin是什么?
它的实际依赖名称是 image-minimizer-webpack-plugin,用于使用imagemin来压缩图像资源。使用以后不要担心图像的大小了,也不需要再找其他压缩工具对项目中用到的图片进行手动压缩,现在它们是可以自动被优化/压缩的。
二、已经有了asset,为什么需要ImageMinimizerPlugin?
{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 20 * 1024 // 小于20kb的图片会被base64处理}},generator: {// 将图片文件输出到 static 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/[hash:8][ext][query]",},}
之前在loader里面用asset(webpack5内置的文件资源模块)已经对图片等资源进行加工处理,把小于20kb的图片会被base64处理转换成dataUrl形式了,为什么还要用到ImageMinimizerPlugin再处理一次图片资源,这是不是多此一举?
答案肯定不是的,因为asset只是对某些图片大小比较小,比如上面的大小小于20kb的图片才转换成dataUrl,不是任何图片都适合转换,那剩下的图片asset 只能做到把他们归类到某个你自定义命名的文件,因为asset 本身不具备压缩图片功能,所以必须借助ImageMinimizerPlugin等图片压缩插件去完成。
三、怎么使用ImageMinimizerPlugin?
-
安装依赖:在项目根目录下安装插件,这步很关键,因为ImageMinimizerPlugin需要用到的工具依赖很多,不止一种。
image-minimizer-webpack-plugin
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng
imagemin-svgo
imagemin
使用 npm i <以上全部依赖> -d -s -
在 Webpack 配置文件中配置 ImageMinimizerPlugin插件。
//引入ImageMinimizerPlugin依赖
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");// 压缩操作一般写在optimization里面
optimization:{// 压缩的操作minimizer:[// 使用ImageMinimizerPlugin进行压缩new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [["gifsicle", { interlaced: true }],["jpegtran", { progressive: true }],["optipng", { optimizationLevel: 5 }],["svgo",{plugins: ["preset-default","prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical",},},],},],],},},}),]
}
四、ImageMinimizerPlugin压缩的成果
在没使用ImageMinimizerPlugin之前,我项目的图片格式打包完成之后是png格式,保持了未打包之前的格式,在使用了ImageMinimizerPlugin之后,变成了WebP格式的图片,所以我上网查了这两个格式的区别如下
WebP格式和PNG格式都是常见的图片格式,它们之间有以下区别:
-
压缩算法:WebP使用了先进的压缩算法,通常可以比PNG更高效地压缩图像,从而减小文件大小。这意味着在相同的图像质量下,WebP格式的图片文件会更小。
-
支持透明度:PNG支持完全的透明度,可以创建具有复杂透明特效的图像。而WebP则通过有损压缩来支持透明度,因此在处理透明图像时可能会有一些细微的损失。
-
浏览器兼容性:PNG格式被广泛支持并可在所有主流浏览器上显示。然而,WebP格式在某些旧版本的浏览器上可能不被完全支持,需要通过兼容性检测和回退方案来确保良好的用户体验。
-
动画支持:PNG格式不支持动画,而WebP支持将多个图像帧合并为一个动画图像。
综上所述,WebP格式在文件大小上具有优势,并且支持动画功能,但在透明度和浏览器兼容性方面略有限制。因此,选择哪种格式应该根据具体的需求和目标平台来决定。
相关文章:
Webpack5 生产模式压缩图片ImageMinimizerPlugin
文章目录 一、 ImageMinimizerPlugin是什么?二、已经有了asset,为什么需要ImageMinimizerPlugin?三、怎么使用ImageMinimizerPlugin?四、ImageMinimizerPlugin压缩的成果 一、 ImageMinimizerPlugin是什么? 它的实际依…...
时序预测 | Matlab实现基于BP神经网络的电力负荷预测模型
文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 时序预测 | Matlab实现基于BP神经网络的电力负荷预测模型 BP神经网络是一种多层的前馈神经网络,其主要的特点是:信号是前向传播的,而误差是反向传播的。B...
基于回溯算法实现八皇后问题
八皇后问题是一个经典的计算机科学问题,它的目标是将8个皇后放置在一个大小为88的棋盘上,使得每个皇后都不会攻击到其他的皇后。皇后可以攻击同一行、同一列和同一对角线上的棋子。 一、八皇后问题介绍 八皇后问题最早由国际西洋棋大师马克斯贝瑟尔在18…...
Linux【网络编程】之深入理解TCP协议
Linux【网络编程】之深入理解TCP协议 TCP协议TCP协议段格式4位首部长度---TCP报头长度信息 TCP可靠性(确认应答)&& 提高传输效率确认应答(ACK)机制32位序号与32为确认序号 16位窗口大小---自己接收缓冲区剩余空间的大小16位紧急指针---紧急数据处…...
如何克服看到别人优于自己而感到的焦虑和迷茫?
文章目录 每日一句正能量前言简述自己的感受怎么做如何调整自己的心态后记 每日一句正能量 行动是至于恐惧的良药,而犹豫、拖延,将不断滋养恐惧。 前言 虽然清楚知识需要靠时间沉淀,但在看到自己做不出来的题别人会做,自己写不出的…...
浅谈React中的ref和useRef
目录 什么是useRef? 使用 ref 访问 DOM 元素 Ref和useRef之间的区别 Ref和useRef的使用案例 善用工具 结论 在各种 JavaScript 库和框架中,React 因其开发人员友好性和支持性而得到认可。 大多数开发人员发现 React 非常舒适且可扩展,…...
Linux C 获取主机网卡名及 IP 的几种方法
在进行 Linux 网络编程时,经常会需要获取本机 IP 地址,除了常规的读取配置文件外,本文罗列几种个人所知的编程常用方法,仅供参考,如有错误请指出。 方法一:使用 ioctl() 获取本地 IP 地址 Linux 下可以使用…...
解密外接显卡:笔记本能否接外置显卡?如何连接外接显卡?
伴随着电脑游戏和图形处理的需求不断增加,很多笔记本电脑使用者开始考虑是否能够通过外接显卡来提升性能。然而,外接显卡对于笔记本电脑是否可行,以及如何连接外接显卡,对于很多人来说仍然是一个迷。本文将为您揭秘外接显卡的奥秘…...
list与erase()
运行代码: //list与erase() #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend istr…...
Arcgis 分区统计majority参数统计问题
利用Arcgis 进行分区统计时,需要统计不同矢量区域中栅格数据的众数(majority),出现无法统计majority参数问题解决 解决:利用copy raster工具,将原始栅格数据 64bit转为16bit...
vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)
1、安装使用 安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --save yarn add wangeditor/editor-for-vue # 或者 npm install wangeditor/editor-for-vue --save在main.js中引入样式 import wangeditor/editor/dist/css/style.css在使用编辑器的页…...
shell脚本练习--安全封堵脚本,使用firewalld实现
一.什么是安全封堵 安全封堵(security hardening)是指采取一系列措施来增强系统的安全性,防止潜在的攻击和漏洞利用。以下是一些常见的安全封堵措施: 更新和修补系统:定期更新操作系统和软件包以获取最新的安全补丁和修…...
双端冒泡排序
双端冒泡排序是对传统冒泡排序的改进,其主要改进在于同时从两端开始排序,相对于传统冒泡排序每次只从一端开始排序,这样可以减少排序的遍历次数。 传统冒泡排序从一端开始,每次将最大(或最小)的元素冒泡到…...
如何在Visual Studio Code中用Mocha对TypeScript进行测试
目录 使用TypeScript编写测试用例 在Visual Studio Code中使用调试器在线调试代码 首先,本文不是一篇介绍有关TypeScript、JavaScript或其它编程语言数据结构和算法的文章。如果你正在准备一场面试,或者学习某一个课程,互联网上可以找到许多…...
GO中Json的解析
一个json字串,想要拿到其中的数据,就需要解析出来 一、适用于json数据的结构已知的情况下 使用json.Unmarshal将json数据解析到结构体中 根据json字串数据的格式定义struct,用来保存解码后的值。这里首先定义了一个与要解析的数据结构一样的…...
chatgpt 提示词-关于数据科学的 75个词语
这里有 75 个 chatgpt 提示,可以立即将其用于数据科学或数据分析等。 1. 伪装成一个SQL终端 提示:假设您是示例数据库前的 SQL 终端。该数据库包含名为“用户”、“项目”、“订单”、“评级”的表。我将输入查询,您将用终端显示的内容进行…...
(自控原理)控制系统的数学模型
目录 一、时域数学模型 1、线性元件微分方程的建立 2、微分方程的求解方法编辑 3、非线性微分方程的线性化 二、复域数学模型 1、传递函数的定义 2、传递函数的标准形式 3、系统的典型环节的传递函数 4、传递函数的性质 5、控制系统数学模型的建立 6、由传递函数求…...
Webpack5 cacheGroups
文章目录 一、 cacheGroups是什么?二、怎么使用cacheGroups?三、cacheGroups实际应用之一? 一、 cacheGroups是什么? 在Webpack 5中,cacheGroups是用于配置代码拆分的规则,它可以帮助你更细粒度地控制生成…...
前端面试的游览器部分(5)每篇10题
41.什么是浏览器的同步和异步加载脚本的区别?你更倾向于使用哪种方式,并解释原因。 浏览器的同步和异步加载脚本是两种不同的脚本加载方式,它们的主要区别在于加载脚本时是否阻塞页面的解析和渲染。 同步加载脚本: 同步加载脚本…...
数据挖掘七种常用的方法汇总
数据挖掘(Data Mining)就是从大量的、不完全的、有噪声的、模糊的、随机的实际应用数据中,提取隐含在其中的、人们事先不知道的、但又是潜在有用的信息和知识的过程。这个定义包括几层含义:数据源必须是真实的、大量的、含噪声的;发现的是用户…...
Abaqus 2023保姆级教程:手把手教你搞定金属管无芯绕弯的完整仿真流程
Abaqus 2023金属管无芯绕弯仿真全流程实战指南 金属管件弯曲成形是制造业中常见的加工工艺,而有限元仿真技术能够大幅降低实际试错成本。本文将基于Abaqus 2023版本,完整演示从零开始建立金属管无芯绕弯仿真模型的全过程。不同于简单操作演示,…...
从PC到手机:一文看懂高通安卓设备上的UEFI启动流程(附XBL/ABL源码结构解析)
从PC到手机:高通安卓设备UEFI启动全流程与架构解析 当按下手机电源键的瞬间,隐藏在芯片深处的精密舞蹈便悄然展开。与PC时代按下机箱按钮后熟悉的BIOS界面不同,移动设备的启动流程更像是一场精心编排的默剧——没有闪烁的光标,没有…...
OP-TEE安全存储深度解析(一):密钥层级与文件加密流程
1. 密钥管理器的核心角色 在OP-TEE的安全存储架构中,密钥管理器就像是一个高度戒备的金库管理员。它不直接存储用户数据,而是负责生成、保护和调度所有用于加密的密钥。这个设计非常巧妙——即使攻击者突破了外层防御,拿到的也只是加密后的数…...
测试库与生产库怎么应对同步中断断点续传_无损发布与更新方案
断点是某条变更事件的唯一标识未被消费,如MySQL的file_nameposition、Debezium的source.offset、Oracle的SCN;需通过元数据表存储offset与主键并查询MAX(offset)恢复,禁止依赖时间戳或COUNT对比。同步中断后怎么准确定位断点位置断点不是“某…...
ISCE2实战指南:在Win10 WSL2中搭建Ubuntu与ISCE2完整开发环境
1. 环境准备:WSL2与Ubuntu安装优化 在Windows 10上搭建ISCE2开发环境,WSL2是最佳选择。相比传统虚拟机,WSL2提供了接近原生Linux的性能,同时又能无缝集成Windows文件系统。我实测下来,处理InSAR数据时性能损耗不到5%&a…...
小智AI固件烧录进阶:手把手教你用Flash烧录器软件合并bin文件(免命令行)
小智AI固件烧录进阶:手把手教你用Flash烧录器软件合并bin文件(免命令行) 最近在调试小智AI项目时,发现不少开发者对固件合并这一步感到头疼。尤其是那些刚接触嵌入式开发的朋友,看到命令行就发怵。其实,合并…...
从零搭建Adams-Matlab机器人联合仿真环境:一份详尽的配置指南
1. 为什么需要Adams-Matlab联合仿真 作为一名在机器人领域摸爬滚打多年的工程师,我深刻理解动力学仿真和控制系统设计之间的鸿沟。Adams擅长多体动力学分析,能精确模拟机械系统的运动学和动力学特性;Matlab则是控制算法开发和验证的利器。但…...
CS32L010芯片烧录实战:用Keil+Jlink一键搞定hex文件(附常见错误排查)
CS32L010芯片烧录实战:用KeilJlink一键搞定hex文件(附常见错误排查) 在嵌入式开发领域,芯片烧录是每个工程师必须掌握的基础技能。CS32L010作为一款性价比极高的32位微控制器,广泛应用于物联网终端设备、智能家居和工业…...
DeepPCB:1500对工业级PCB缺陷检测数据集,让AI质检更精准
DeepPCB:1500对工业级PCB缺陷检测数据集,让AI质检更精准 【免费下载链接】DeepPCB A PCB defect dataset. 项目地址: https://gitcode.com/gh_mirrors/de/DeepPCB 还在为PCB缺陷检测项目寻找高质量数据集而苦恼吗?DeepPCB为您提供了一…...
从ASTM标准到工程实践:雨流计数法的核心算法与选型指南
1. 雨流计数法:从标准到实战的桥梁 第一次接触雨流计数法是在处理风电塔筒的振动数据时,当时面对长达三个月的采样数据完全无从下手。直到发现ASTM E1049-85标准中这个神奇的方法,才明白原来疲劳分析可以如此优雅。简单来说,雨流计…...
