image-minimizer-webpack-plugin

imagemin-webpack-pluginがcore-js3に対応してなくて、利用

webpack公式が管理してるので比較的安心

ただし、v2からwebpack5以上にする必要がある

そのため、v1を使う事もある

vue-cli appを利用していてぶつかった

当時、vue-cliの最新がwebpack5に対応していなかった...

困りごと

imagemin-webpを利用して、pngやjpgををWebPに変換したいが、上手く変わらない

事実

それぞれの画像format 形式をそれぞれの最適化ツールで圧縮することは可能

WebPファイルを用意しない場合、生成されない

エラーも吐かれない

妥協

imagemin-webpを利用してWebP画像を圧縮

code:webpack.config.js

new ImageMinimizerPlugin({

test: /\.(webp)$/i,

minimizerOptions: {

plugins: 'imagemin-webp', { quality: 75, method: 6 },

}),

問題

pngなどを手動でWebPに変更する作業が存在

Squooshを用いて手作業で変換するならBuild時にcompress image 画像圧縮する意味ない

別にSquooshを用いて変換する必要はない

想定してないoptionが付与されている可能性ある

ある例では、2kbぐらい減ってた

ファイル名変更で画像format 形式を変えるでok