3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webpackの出力をZopfliで圧縮する

Last updated at Posted at 2017-12-07

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-gypnode-pre-gypパッケージ(グローバルに必要っぽい)
  • Python 2系列
  • C/C++コンパイラ

あっという間にヤクの毛まみれになりますが、用意するのは最初1回だけですし、Linux系では最初からあるものも多いので、まあ何とかなる範囲です。

インストールが完了すれば、あとの引数はcompression-webpack-pluginと同じ形なので、そのままrequireを置き換えるだけで、Zopfliに入れ替えることができます。

教訓

公式の解説すら、ときに間違える

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?