webpack-image-resize-loader图像尺寸调整加载器
图片太大加载慢？那就试试 webpack-image-resize-loader 吧。它能在打包时直接帮你把图片缩放到指定尺寸，省去额外，挺省事的。支持的格式也挺全，像 JPEG、PNG、WebP、TIFF 都能搞定。
装起来也简单，npm install --save-dev webpack-image-resize-loader 或者用 yarn 也行，随你喜欢。想让不同类型的图片走不同的逻辑？用 webpack 的 oneOf 配合着用，效果还不错。
比如你只想让几张 banner 图缩小一下，又不想全局生效，就可以这么配。还可以搭配 file-loader 或 url-loader 一起用，顺序也要注意，resize 的 loader 要放在 file-loader 前面。
你如果还想先个滤镜、加个水印啥的，再 resize，也没问题。直接在 webpack.config.js 里把链排好顺序就行。嗯，对图像有特殊需求的同学，这个 loader 蛮灵活的。
另外，如果你关注图像压缩效率，可以看看 基于 TinyPNG 算法的 Webpack 图像压缩插件，配合使用效果更佳。
如果你经常跟响应式图片打交道，比如 srcset 的玩法，那这工具挺适合你，响应也快，代码也简单。
总结一句：webpack-image-resize-loader 适合在打包阶段就对图片做减肥，不依赖前端运行，配合得当，能省不少流量和加载时间。
...
文件大小：70.69MB
评论区