webpack-图片压缩

一个爱听音乐的程序员

2024-06-30 帮助1人

图片压缩和合并

在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后的体积

首先来看看没有利用压缩插件进行压缩过的图片大小，待会可以进行比对验证，如下：

学新通

压缩图片

利用 image-webpack-loader/img-loader 压缩图片：

本文就以 image-webpack-loader 为例两个插件都可以进行压缩，首先安装 image-webpack-loader：

npm install image-webpack-loader --save-dev

修改 webpack 配置：

{
    loader: 'image-webpack-loader',
    options: {
        mozjpeg: {
            progressive: true,
            quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
            enabled: false,
        },
        pngquant: {
            quality: [0.65, 0.90],
            speed: 4
        },
        gifsicle: {
            interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
            quality: 75
        }
    }
},

如上的配置内容当中的 quality 属性配置的值越大，那么图片将会被压缩的越小那么图片的清晰度也会随之变模糊，最终经过 webpack 打包之后的大小如下：

学新通

这篇好文章是转载于：学新通技术网

webpack-图片压缩

图片压缩和合并

压缩图片

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办