img-loader Webpack图像最小化加载器
图像压缩用的 img-loader，挺适合配合 Webpack 来做静态资源优化的。用法也简单，和 url-loader 一起用，把图片转成 base64 的时候还能顺手压缩一下，响应也快了不少。它依赖 imagemin，你得顺带装上想用的 imagemin 插件，比如 imagemin-mozjpeg、imagemin-pngquant 这些，不然压缩效果出不来。
安装也不复杂：
npm install img-loader --save-dev配合 Webpack 4 用法长这样：
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'url-loader?limit=10000',
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-mozjpeg')({ progressive: true }),
require('imagemin-pngquant')({ quality: [0.65, 0.90], speed: 4 })
]
}
}
]
}
]
}这个 loader 比较适合那些静态资源比较多的项目，比如有多 icon 或 banner 图的官网项目。图片小了，用户体验自然就上来了。
哦对了，SVG 也能压，不过效果就看具体插件了。如果你对 SVG 要求高，可以看看 vue-svg-loader。
，img-loader 就是那种装上一次就不想删的实用工具。如果你正好在折腾 Webpack 构建优化，建议你试试看。
文件大小：8.42KB
评论区