このページは Cloud Translation API によって翻訳されました。

webpack で Imagemin を使用する

Katie Hempenius

Imagemin webpack プラグインを設定する

この Glitch にはすでに webpack、webpack-cli、および imagemin-webpack-plugin。Imagemin の構成を追加するには、次が必要です webpack.config.js ファイルを編集します。

このプロジェクトの既存の webpack.config.js は、次の場所からイメージをコピーしています images/ ディレクトリから dist/ ディレクトリに移動しますが、まだ圧縮します。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。

で確認できます。

注: 新しい dist/ フォルダに画像をコピーする理由は何ですか。dist/は「ディストリビューション」の略です。元のコードや画像などは、少し異なる可能性があるため、配布したバージョンから分離するのが一般的です。

まず、次のコードをコードの先頭に追加して、Imagemin プラグインを宣言します。 webpack.config.js:

const ImageminPlugin = require('imagemin-webpack-plugin').default;

次に、以下のコードを plugins[] 配列の最後のアイテムとして追加します。この Webpack が使用するプラグインのリストに Imagemin を追加します。

で確認できます。

new ImageminPlugin()

✔️ 確認

完成した webpack.config.js ファイルは次のようになります。

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

これで、Imagemin を使用して画像を圧縮する webpack 構成が完成しました。

webpack を実行する

[ターミナル] をクリックします（注: ターミナルボタンが表示されない場合は、[全画面表示] オプションをご利用ください）。
イメージを圧縮するには、 console:

webpack --config webpack.config.js --mode development

しかし、webpack を本番環境モードで実行するとどうなるでしょうか。

Webpack を再実行しますが、今回は本番環境モードで実行します。

webpack --config webpack.config.js --mode production

今度は、webpack は PNG が圧縮しても、推奨サイズの上限を超えることがあります。（webpack の development モードと production モードでは、異なるものを優先するため、本番環境モードで webpack を実行しているときにのみ、この警告が表示されます）。

Imagemin 構成をカスタマイズして、この警告を修正します。

Imagemin 構成をカスタマイズする

次のオブジェクトを ImageminPlugin() に渡して、PNG 画像を圧縮するための設定を追加します。

{pngquant: ({quality: [0.5, 0.5]})}

このコードは、Pngquant プラグインを使用して PNG を圧縮するよう Imagemin に指示しています。「 quality フィールドでは、min と max の値の範囲を使用して、圧縮レベルです。0 が最小、1 が最高です。すべてのイメージに対して 50% の品質で圧縮する場合は、最小値と最大値の両方に 0.5 を渡します。

✔️ 確認

webpack.config.js ファイルは以下のようになります。

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

では、JPEG はどうでしょうか。プロジェクトには JPEG 画像もあるため、圧縮方法も考慮します

Imagemin 構成をカスタマイズする（続き）

JPG 圧縮に imagemin-webpack-plugin のデフォルトプラグインを使用する代わりに（imagemin-jpegtran）場合は、imagemin-mozjpeg プラグインを使用します。Jpegtran と異なり Mozjpeg では、JPG 圧縮の圧縮品質を指定できます。Google では、すでに Mozjpeg プラグインをインストールしていますが、 webpack.config.js ファイルを編集します。

次の行を追加して、imagemin-mozjpeg プラグインを初期化します。 webpack.config.js ファイルの一番上:

const imageminMozjpeg = require('imagemin-mozjpeg');

ImageminPlugin() に渡されるオブジェクトに plugins プロパティを追加します。これにより、オブジェクトは次のようになります。

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

このコードは、JPG を 50 の品質に圧縮するよう Webpack に指示しています（0 は最悪。 100 が最適）です。

デフォルトのプラグインであるプラグインの設定を追加する場合、 imagemin-webpack-plugin は、キーオブジェクトペアとしてオブジェクトに追加できます。 ImageminPlugin() に渡されます。Pnquant の設定は Google Cloud のできます。

ただし、デフォルト以外のプラグイン（ Mozjpeg など) で生成されたものは、対応する配列 plugins プロパティ。

✔️ 確認

コードは次のようになります。

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

webpack を再実行し、Lighthouse で結果を確認する

コンソールで Webpack を再実行します。

webpack --config webpack.config.js --mode production

今回は、変更により、webpack の警告は修正されているはずです。

webpack はサイズの大きい画像について警告しますが、画像のサイズが非圧縮か非圧縮かですこの理由から、Terraform を使用して、 Lighthouse にアクセスして、変更を確認します。

Lighthouse の「Efficiently encode images」パフォーマンスの監査によって、ページの JPEG 画像が最適に圧縮されることを確認します。

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
Lighthouse のパフォーマンス監査を実行します（[Lighthouse] > [Options] > [Performance]）。 Glitch のライブバージョンを開いて、[Efficiently encode] 画像の監査に合格しました。

「Efficiently encode images」Lighthouse の監査

完了しました。Imagemin を使用して、ページ上の画像を最適に圧縮しました。