安装插件

cnpm install imagemin-gifsicle --save-dev
cnpm install imagemin-mozjpeg --save-dev
cnpm install imagemin-optipng --save-dev
cnpm install imagemin-pngquant --save-dev
cnpm install pngquant-bin --save-dev
cnpm install image-webpack-loader --save-dev

webpack配置

如果是 webpack.base.config.js

 {// test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,// loader: 'url-loader',// options: {//   limit: 10000,//   name: utils.assetsPath('img/[name].[hash:7].[ext]')// },test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: [{loader: 'url-loader',options: {limit: 10000,// 小于10K的图片转成base64编码的dataURL字符串写到代码中fallback: 'file-loader',name: utils.assetsPath('img/[name].[hash:7].[ext]')// 其他的图片转移到静态资源文件夹}},{loader: 'image-webpack-loader',// 压缩图片options: {mozjpeg: {//jpeg压缩progressive: true,quality: 65},// optipng.enabled: false will disable optipngoptipng: {//png压缩enabled: false,},pngquant: {//png压缩quality: [0.65, 0.90],speed: 4},gifsicle: {//gif压缩interlaced: false,}// the webp option will enable WEBP//webp: {// quality: 75//}}}]},

如果是 vue.config.js

   chainWebpack: (config) => {config.module.rule('images').exclude.add(resolve('src/assets/icons')) // 排除icons目录，这些图标已用 svg-sprite-loader 处理，打包成 svg-sprite 了.end().use('url-loader').tap(options => ({limit: 10240, // 稍微改大了点fallback: {loader: require.resolve('file-loader'),options: {// 在这里修改file-loader的配置// 直接把outputPath的目录加上，虽然语义没分开清晰但比较简洁name: 'static/img/[name].[hash:8].[ext]',esModule: false, //低版本默认为false，高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false }}})).end().use('image-webpack-loader').loader('image-webpack-loader').options({mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像optipng: { enabled: true }, // 压缩PNG图像pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像gifsicle: { interlaced: false } // 压缩GIF图像}).end().enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
}

webpack 图片压缩相关推荐

【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章由于自 ...
webpack 图片压缩不起作用_理论｜webpack2 终极优化
webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行.webpack2增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的 ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
TinyPng图片压缩的正确打开方式
https://tinypng.com/ TinyPNG使用智能的「有损压缩技术」来减少WEBP.JPEG和PNG文件的文件大小.通过选择性地减少图像中的「颜色数量」,使用更少的字节来存储数据.这种效 ...
vue3 项目修改打包后的引用路径，调整图片压缩成base64的门槛
vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛前言解决完事前言最近的项目中需要在程序中显示一个H5页面,所以按照官方VUE CLI的教程创建了一个项目开始整.整到最后打 ...
Android性能优化之图片压缩优化
1 分类 Android图片压缩结合多种压缩方式,常用的有尺寸压缩.质量压缩.采样率压缩以及通过JNI调用libjpeg库来进行压缩. 参考此方法:Android-BitherCompress 备注: ...
使用libjpeg进行图片压缩（哈夫曼算法,无损压缩）
Huffman算法也是一种无损压缩算法,但与LZW压缩算法不同,Huffman需要得到每种字符出现概率的先验知识.通过计算字符序列中每种字符出现的频率,为每种字符进行唯一的编码设计,使得频率高的字符占 ...
Android图片压缩（质量压缩和尺寸压缩）
在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩):质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手 ...
android apk瘦身之图片压缩 tinypng
Android 的图片压缩其实压缩比很小.tinypng 大概可以压缩20%左右,我们工程的所有图片,之前是860k,压缩之后620k,少了200k. 使用: 1.安装python 2.使用pip进行 ...
(0031) iOS 开发之图片压缩
1. Aspect单词的, 都会按照图片的宽高比来拉伸.这样会显示不全照片 2. Scale单词的,都会对图片进行拉伸(缩放); 3. 没有出现Scale单词的,都不会对图片进行拉伸; UIViewC ...

webpack 图片压缩

安装插件

webpack配置

如果是 webpack.base.config.js

如果是 vue.config.js

webpack 图片压缩相关推荐

最新文章

热门文章