Webpackの出力をZopfliで縮小しようとしたところ、(過去の話ですが)妙なところでつまずいてしまいました。
Zopfliって?
以前に記事を書いたので詳細はそちらに譲りますが、
- Googleが開発した圧縮アルゴリズム
- Deflate(zip/gzip/PNGなどなど)互換
- 圧縮率は通常のDeflateに対して数%向上、圧縮時間は数倍以上
こんな圧縮アルゴリズムです。Webpackで生成するようなアセットは、一度生成すれば一定の期間使うようなものなので、デプロイの過程にZopfli圧縮を入れれば、単なるgzip転送よりさらにコンパクトにできます(Sprocketsに仕込んでみた例)。
プラグインの設定が…できない!?
Webpackでよく使われる圧縮プラグインとしてcompression-webpack-pluginがありますが、説明ページを見ていると、設定のalgorithm
としてzopfli
を選べる…ように書いてありました。
で、そのとおりに仕掛けてみたのですが、一向に動きません。悪戦苦闘しつつも調べてみれば、(入れようとした当時の)少し前のバージョンでZopfli対応は別なパッケージに切り出され、説明だけ放置されていたという驚愕の事実が判明してしまいました(もちろん、今では修正されています)。
Zopfli版を入れる
このようなとんでもない現実に直面するも、正しいパッケージがわかったので、気を取り直してzopfli-webpack-pluginを入れることにしました。とはいえ、このプラグインも内部でnode-zopfliという、C言語のZopfliコードをそのまま利用するパッケージを入れているので、ビルドにはいくつか必要なものがあります。
- npmの
node-gyp
、node-pre-gyp
パッケージ(グローバルに必要っぽい) - Python 2系列
- C/C++コンパイラ
あっという間にヤクの毛まみれになりますが、用意するのは最初1回だけですし、Linux系では最初からあるものも多いので、まあ何とかなる範囲です。
インストールが完了すれば、あとの引数はcompression-webpack-plugin
と同じ形なので、そのままrequire
を置き換えるだけで、Zopfliに入れ替えることができます。
教訓
公式の解説すら、ときに間違える