当前位置: 首页 > news >正文

如何在 Webpack 中开启图片压缩

工具对比

npmtrends.com/image-minim…

这四个压缩工具,从下载量来看,image-webpack-loader 较多,image-minimizer-webpack-pluginimagemin-webpack-plugin 次之,imagemin-webpack 已经不再维护,因此不考虑此工具。

www.npmjs.com/package/ima…

以下是对 image-minimizer-webpack-pluginimage-webpack-loaderimagemin-webpack-plugin 的使用进行简要介绍。

使用与配置

先给出没有加压缩工具的 webpack 配置

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {entry: {index: './index.js',},output: {path: path.resolve(__dirname, 'build1'),filename: '[name].js',clean: true},module: {rules: [{test: /.(css)$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']}, {test: /.(jpe?g|png|gif|ico|svg)$/,exclude: /node_modules/,type: 'asset',parser: {dataUrlCondition: {maxSize: 8 * 1024}},}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css',ignoreOrder: false}),],mode: 'production',optimization: {runtimeChunk: {name: 'runtime~single'}}
} 

image-minimizer-webpack-plugin

安装:cnpm i image-minimizer-webpack-plugin imagemin -D

无损压缩:cnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

配置如下:

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {optimization: {minimizer:[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",},},],},],],},},}),]}
} 

打包后,图片大小压缩至 7.41 MB。


有损压缩:cnpm install @squoosh/lib --save-dev

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = {optimization: {minimizer:[new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.squooshMinify}}),],runtimeChunk: {name: 'runtime~single'}}
} 

打包后,图片大小压缩至 1.48 MB。

image-webpack-loader

安装:cnpm install image-webpack-loader -D

配置如下:

module.exports = {module: {rules: [{test: /.(jpe?g|png|gif|ico|svg)$/,exclude: /node_modules/,type: 'asset',parser: {dataUrlCondition: {maxSize: 8 * 1024}},use: [{loader: 'image-webpack-loader',// options: {// disable: process.env.NODE_ENV === 'development'// },}]}]},
} 

打包后,图片大小压缩至 1.69 MB。

imagemin-webpack-plugin

安装:cnpm install imagemin-webpack-plugin

配置如下:

const ImageminPlugin = require('imagemin-webpack-plugin').defaultmodule.exports = {optimization: {minimizer: [new ImageminPlugin({// disable: process.env.NODE_ENV === 'development',}),],runtimeChunk: {name: 'runtime~single'}}
} 

打包后,图片大小压缩至 7.64 MB。

压缩前后对比

这三个工具的共同点:压缩图片都依赖于 imagemin,所以对使用这几个工具压缩图片前后体积对比,个人感觉意义不大;如果对同一图片压缩后体积大小不一致,甚至差别很大,很可能是因为压缩相关的配置不太一致。

不过我们可以就以上的配置(基本是官方给的示例配置),去做一些比较。

工具使用感受压缩前压缩后
image-minimizer-webpack-plugin配置较复杂8.26 MB无损:7.41 MB有损:1.48 MB
image-webpack-loader配置简单8.26 MB有损:1.69 MB
imagemin-webpack-plugin配置简单8.26 MB无损:7.64 MB

使用建议

最后从工具的流行程度、使用感受、压缩力度等方面综合考虑,推荐使用 image-webpack-loader 来压缩图片。

注意:在安装包的时候可能会报错,npm install image-webpack-loader -D,主要是在下载一系列压缩工具的时候出错。这时可以切换为国内镜像,用 cnpm install image-webpack-loader -D,这样可以成功安装。

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

相关文章:

如何在 Webpack 中开启图片压缩

工具对比 npmtrends.com/image-minim… 这四个压缩工具,从下载量来看,image-webpack-loader 较多,image-minimizer-webpack-plugin、imagemin-webpack-plugin 次之,imagemin-webpack 已经不再维护,因此不考虑此工具。 …...

Web-Filter

## 今日内容 1. Filter:过滤器 2. Listener:监听器 # Filter:过滤器 1. 概念: * 生活中的过滤器:净水器,空气净化器,土匪、 * web中的过滤器:当访问服务器的资源时…...

测试写文章自动保存

近日恰逢双十一,瞅了瞅自己干瘪的钱包,没忍心入手期待已久的 macPro,只好在虚拟机里玩一下 mac好了,等以后钱包傲气的时候再来个真实的。 安装环境: windows10 VMWare14.2 2018-7-28 小嘚瑟补充:唧唧歪歪大半年,一夜回到解放前,终于剁手整了个真机,可以折腾一下了 ——…...

云平台搭建实例

嗨嗨,每天一更是不是很奈斯?我也觉得,昨天晚上我学校的老师借一天一千的设备,只能用七天,所以我拿出来给你们没有设备和刚用设备的看看吧。操作:首先我们将云平台安装好后,插上网线,…...

【Airplay_BCT】关于Bonjour的概念解答

1.什么是Bonjour? Bonjour,也称为零配置网络,可以自动发现 IP 网络上的计算机、设备和服务。 Bonjour 使用行业标准 IP 协议,允许设备自动发现彼此,无需输入 IP 地址或配置 DNS 服务器。具体来说,Bonjour …...

C++深入浅出(九)—— 多态

文章目录1. 多态的概念2. 多态的定义及实现🍑 多态的构成条件🍑 虚函数🍑 虚函数的重写🍑 虚函数重写的两个例外🍑 C11的override 和 final🍑 重载、覆盖(重写)、隐藏(重定义)的对比3. 抽象类🍑…...

shell学习4

目录 一、统计文本中的词频 二、压缩javascript 三、打印文件的或行中的第n个单词或列---awk 3.1 利用awk打印文件中每行中的第五个单词。 3.2 利用awk打印当前目录下的文件的权限和文件名 3.3 利用awk打印从M行到N行这个范围内的所有文本 3.4 利用awk 部分提取文件中的内…...

VR全景行业的应用价值如何呈现?

互联网高速发展的今天,多媒体所包含的种类也是越来越多,而一些较为传统的表现方式已经越来越无法满足大部分客户对展示方式的要求。而在传统的表现方式中,展现的方式无非是静态的平面图片以及动态的视频,但是他们都有一个缺点就是…...

ESP-IDF:TCP多线程并发服务器

核心代码&#xff1a; 核心思想就是主线程只处理socket监听功能&#xff0c;把数据处理部分分配到不同的线程中去处理。来了一个客户端连接&#xff0c;就分配新的线程去处理该客户端的数据请求。 代码&#xff1a; /多线程并发服务器/ #include <stdio.h> #include …...

Springboot扩展点之SmartInitializingSingleton

前言这篇文章会重点分析一下SmartInitializingSingleton扩展点的功能 特性、实现方式 、工作原理。SmartInitializingSingleton扩展点内只有一个扩展方法&#xff0c;且执行时机在Spring Bean的生命周期里比较靠后&#xff0c;很重要&#xff0c;但是也很简单。功能特性1、Smar…...

基于linux内核的驱动开发学习

1 驱动 定义&#xff1a;驱使硬件动起来的程序 种类&#xff1a;裸机驱动&#xff1a;需求分析--》查原理图--》查芯片手册--》code 系统驱动&#xff1a;需求分析--》查原理图--》查芯片手册--》设备树--》code --》安装到内核中…...

python3 django gunicorn

首先&#xff0c;Gunicorn是一个高效的Web服务器&#xff0c;地位相当于Java中的Tomcat。简单来说gunicorn封装了HTTP的底层实现&#xff0c;我们通过gunicorn启动服务&#xff0c;用户请求与服务相应都经过gunicorn传输。下载gunicorn的方法也比较简单&#xff0c;在django工程…...

专家分享 | 租赁型售楼处标准化示范区提效研究

2023年2月8日上午&#xff0c;优积科技邀请原金地集团北京公司 高级室内设计专业应锎经理为我司团队分享《租赁型售楼处标准化示范区提效》的专题。 此次专家分享课题加上大家踊跃讨论时间长达3小时&#xff0c;会上应总详细介绍了租赁型售楼处标准化示范区提效&#xff0c;需…...

linux之echo使用技巧

参考文章&#xff1a;linux基本功系列-echo命令实战一、echo 命令是什么&#xff1f;作用&#xff1a; echo命令能将指定文本显示在Linux命令行上&#xff0c;或者通过重定向符写入到指定的文件中。语 法&#xff1a;echo [-ne][字符串] / echo [–help][–version]补充说明&am…...

Keras实例教程(7)之构建模型的第三种方式

多年以前,在TensorFlow中搭建深度学习模型对于很多人来说其实仍然是比较困难的。相比之下,Keras作为独立于TensorFlow的一种深度学习框架则要简单很多。在TensorFlow与PyTorch的竞争中逐渐式微的情况下,TensorFlow团队终于宣布Keras将成为在tensorflow2.0中构建和训练模型的…...

【JUC并发编程】18 CopyOnWriteArrayList源码也就够看2分钟

文章目录1、CopyOnWriteArrayList概述2、原理 / 源码1&#xff09;构造函数2、add()3&#xff09;get()4&#xff09;remove()5&#xff09;iterator()1、CopyOnWriteArrayList概述 CopyOnWriteArrayList相当于线程安全的ArrayList&#xff0c;底层是一个可变数组。 特点如下…...

如何优雅的实现回调函数?

本篇文章又是一期优雅的代码编程介绍———回调函数。 传统的nodejs编程都是这样的 const fs require(fs) fs.readFile(test.txt,utf8, function(err, dataStr){if(err){} }) 嵌套层级如果多了就成回调地狱了。如果我们将这种风格的代码转换成这样呢&#xff1f; const fs …...

3GPP-NR Band20标准定义频点和信道(3GPP V17.7.0 (2022-12))

Reference test frequencies for NR operating band n20 Table 4.3.1.1.1.20-1: Test frequencies for NRoperating band n20 and SCS 15 kHz CBW [MHz]carrierBandwidth...

Excel表格的公式不想显示出来,可以这样操作

在制作Excel表格的时候&#xff0c;很多人做数据会用到函数公式&#xff0c;这些编辑都是默认可以看到的。 但有时候我们不想让他人看到自己的计算思路和所用公式&#xff0c;有没有办法可以隐藏公式&#xff0c;只显示数据呢&#xff1f;答案是肯定的&#xff0c;今天我们就来…...

【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)

【零基础入门前端系列】—语义化标签、实体字符、视频、音频&#xff08;八&#xff09; 一、什么是HTML语义化标签 语义化的标签&#xff0c;旨在让标签有自己的含义 如上代码&#xff1a;p标签与span标签的区别之一就是&#xff0c;p标签的含义是段落而span标签没有独特的…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...