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 ファイルを圧縮してみます。

ファイルの種類Byte数ファイル名
末圧縮28700765bcbc899f379216109acd0b6c494618.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 での比較です。多少ファイルサイズが小さくなっています。

ファイルの種類Byte数ファイル名
末圧縮28700765bcbc899f379216109acd0b6c494618.svg
zopfli8015965bcbc899f379216109acd0b6c494618.svg.gz
gzip8643265bcbc899f379216109acd0b6c494618_svg.gz

設定を変更する

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
        })
    ]

ファイルの種類Byte数ファイル名
option指定前8015965bcbc899f379216109acd0b6c494618.svg.gz
option指定後8013665bcbc899f379216109acd0b6c494618.svg.gz

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


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
    })
build 後、ファイルを確認しましたが、特に圧縮されている様子はありませんでした。
png 圧縮には対応していないのかもしれません。


HTTP サーバの設定

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

以上です。


  1. option の意味はわかって設定していません。numiterations は試行回数だと思いますが、他はよくわからず指定しています。
    pierreinglebert/node-zopfli: Node bindings for Zopfli Compression Algorithm (zlib, gzip, deflate compatible) に解説はあります。 

コメント