tdewolff/minifyでWebサイトのビルド時間を1/100に

とあるサービスに1万ほどページを追加したのですが、改めてビルドツールは自作に限ると思いました。 理由はタイトルにあるように、ビルド時間を削減できるからです。 最近はNode.jsのビルドツール (Gulp, WebPack, Parcel, etc.) が流行っているのですが、 これらはページ数が増えると制御が大変になってきます。 高機能でSPAに便利なのは確かだけど、ビルドプロセスが複雑過ぎるし、リッチ過ぎる。

例えば数千ページくらいをビルドする時、JavaScriptのトランスコンパイルを1ページずつ実行とかは、ただの苦行です。 トランスコンパイルは使うべきではなくバージョンは固定すべきだし、 使ったとしても事前最適化しないといけない訳ですが、調整をしようとするとビルドプロセスがわかりにくいせいで、非常に面倒。 以前から感じていたのですが、ページ数の多いサイトを作っていると、改めてリッチ過ぎる事の弊害を感じました。


私は数千ページ以上のビルドには、以下の処理手順のビルドツールを自作しています。

1. UnCSS/DropCSS: 未使用CSSを削除 (事前処理→数千ページに一括適用)
2. tdewolff/minify: JavaScript/CSS/HTMLを圧縮
3. 自作: gzip/brotliで圧縮

まずSPAでよく使われるインライン化は非SPAページでは効率が悪い事が多いので、たいていはlinkタグで読み込みます。 ページごとに最適化するのではなく、使うべきCSSをすべて載せたテストページを作って未使用CSSの削除を事前に行い、文字列展開します。 たくさん読み込むと遅くなるので、ファーストビューとセカンドビューの2つだけにします。 そして次にコンテンツ圧縮していくのですが、ここで重要なのがtdewolff/minifyを使う事です。 以前紹介した事もあるけど、Node.jsのたいていのビルドツールの100倍ほど高速に色々なものを圧縮できる素晴らしいツールです。 最後にgzip/brotliで事前圧縮してビルドは完了。

割と簡単な上記の構成でも、1万ページくらいなら2-3分でビルドできます。 Node.jsのビルドツールだと数時間は軽く掛かるので、やはりtdewolff/minifyは凄いと思う。 その割に日本語の記事がほとんどないのは不思議です。SPA人口が多過ぎるのかなあ。

ところで本当は画像/SVGを自動でインライン化するような機能も自作してるんだけど、パースに時間掛かるしファイルサイズの14KB調整とかでビルドが遅くなるだけなので、最初から手作業でインライン化したほうが良いんじゃないかと最近は思ってる。 このようなビルドプロセスの最適化もとても大切だと思う。


tdewolff/minifyに唯一欠点があるとすれば、JavaScriptの圧縮率が平凡な事でしょうか。 本気で圧縮するなら他ツールを使うべきですが、1万ページあるとビルドに丸1日掛かりかねないので無理。 tdewolff/minifyがローカル変数をmangleさえしてくれれば間違いなく最強ツールになるので、今後に期待しています。 追記: 気付いたら速度も圧縮率も素晴らしいツールになっており、あらゆる面でほぼ最強になっていました。つよい。