zopfli-webpack-plugin で、静的コンテンツを圧縮する

Webpack で gzip の事前圧縮をする方法を調べたところ、gzip 互換でより圧縮率の高い、zopfli というものがあることを知りました。
webpack-contrib/zopfli-webpack-plugin: Prepare compressed versions of assets with node-zopfli zopfli で 圧縮してくれるようなので使用してみた結果を記載します。

追記 後日 plugin を外しました。

webpack-contrib/zopfli-webpack-plugin: Prepare compressed versions of assets with node-zopfli が悪いのか、Plugin の適用順序が悪いのかはわかりませんが、作成された Javascript が シンタックスエラーとなったため、Plugin をコメントアウトしました。
記載方法ですかね。

コンテンツを圧縮する

圧縮対象のファイル

svg ファイルを圧縮してみます。

インストール、設定

• インストール
  

  npm i -D zopfli-webpack-plugin
  

• webpack.config.json に ZopfliPlugin を追加する
  README.md のまんまですが、以下を記載します。
  

  var ZopfliPlugin = require("zopfli-webpack-plugin");
  module.exports = {
      plugins: [
          //........
          new ZopfliPlugin({
            asset: "[path].gz[query]",
            algorithm: "zopfli",
            test: /\.(js|css|png|ttf|woff|eot|svg)$/,
            threshold: 10240,
            minRatio: 0.8
          })
      ]
  }
  

ビルド後の gz の容量の確認

通常のgzip の結果と、zopfli での比較です。多少ファイルサイズが小さくなっています。

設定を変更する

option を指定してみます。
numiterations を50、blocksplittinglast を true、blocksplittingmax を30 に設定します。

    plugins: [
        //........
        new ZopfliPlugin({
          asset: "[path].gz[query]",
          algorithm: "zopfli",
          test: /\.(js|css|ttf|woff|eot|svg)$/,
          threshold: 10240,
          minRatio: 0.9,
          numiterations : 50,
          blocksplittinglast : true,
          blocksplittingmax : 30
        })
    ]

多少ファイルサイズが小さくなりました。¹

png の圧縮を試みる

pierreinglebert/node-zopfli: Node bindings for Zopfli Compression Algorithm (zlib, gzip, deflate compatible) には、png 圧縮用の コマンドの記載があります。
指定できるのか試しに algorithm に、zopflipng を指定してみました。

    new ZopfliPlugin({
      asset: "[path].gz[query]",
      algorithm: "zopflipng",
      test: /\.(png)$/,
      threshold: 10240,
      minRatio: 0.99,
      numiterations : 50,
      blocksplittinglast : true,
      blocksplittingmax : 30
    })

HTTP サーバの設定

mod_deflate での圧縮が不要になるため、以下を参考に、js、css のリクエストがあった場合は、gz にリライトするようにしました。
* gzip 圧縮した静的ファイルを、Apache から直接配信する方法 - Qiita

以上です。