Bundle Transformerを使用する開発者からよく尋ねられます：「どのミニマイザーが最高の圧縮率を持っていますか？」 基本的に、昨年9月に私の記事「Bundle Transformer 1.6.2が出てきましたか、それとも半年で何が変わったのですか？」で、コード圧縮の観点からミニマライザーの比較を既に行っていますが、この比較は表面的なものであり、数値でサポートされていませんでした。
この短い記事では、例としてバンドルトランスフォーマーミニマイザーアダプターを使用して、最も一般的なCSSおよびJSコードの最小化アルゴリズムを比較します。 Twitter Bootstrapバージョン2.3.2の
bootstrap.css
および
bootstrap.js
ファイルがソースファイルとして使用されます。 YSlowを使用してファイルサイズを測定します。
CSSミニマイザーの比較
bootstrap.css
ソースファイルのサイズは127.3 KBで、GZip圧縮を適用すると、27.9 KBになります。 この表には、さまざまなCSS最小化アルゴリズムを
bootstrap.css
ファイルに適用して取得したファイルサイズに関する情報が含まれています。
| ミニマイザーアダプター | 最小化アルゴリズム | 最小化後のサイズ | 保存中 | GZip圧縮による最小化後のサイズ | GZip圧縮の節約 |
|---|---|---|---|---|---|
| Yuicssmininifier | YUI CSS Compressor for .Net 2.2.0.0 | 106.0 KB | 16.73％ | 24.5 KB | 12.19％ |
| MicrosoftAjaxCssMinifier | Microsoft Ajax CSS Minifier 4.92 | 105.7 KB | 16.97％ | 24.5 KB | 12.19％ |
| クリジャノフスキーCssMinifier | CSSO 1.3.7 | 105.6 KB | 17.05％ | 24.6 KB | 11.83％ |
| WgCssMinifier | WebGrease Semantic CSS Minifier 1.3.0 | - | - | - | - |
この表は、 Yandexの CSSOミニマイザー（CSSオプティマイザー）が最良の結果を示したことを示しています。 この最小化の主な利点は、CSSコードの構造最小化のサポートです（構造最小化の詳細については、 BEM方法論の Webサイトを参照してください）。
残念ながら、 Microsoftの構造最小化ツールであるWebGrease Semantic CSS Minifierは、
bootstrap.css
ファイルを最小化できなかったため、戦いから脱落しました。
一方、Microsoftのもう1つの最小化ツールであるMicrosoft Ajax CSS Minifierは、主要な競合他社であるYUI CSS Compressor for .Netと比較して非常に良い結果を示しました。
JS Code Minimizerの比較
bootstrap.js
ソースファイルのサイズは61.9 KBで、GZip圧縮を適用した後のサイズは16.9 KBです。 この表には、さまざまなJS最小化アルゴリズムを
bootstrap.js
ファイルに適用して取得したファイルサイズに関する情報が含まれています。
| ミニマイザーアダプター | 最小化アルゴリズム | 最小化後のサイズ | 保存中 | GZip圧縮による最小化後のサイズ | GZip圧縮の節約 |
|---|---|---|---|---|---|
| CrockfordJsMinifier | 2007年5 月22日のJSMin | 34.5 KB | 44.26％ | 11.1 KB | 34.32％ |
| EdwardsJsMinifier | パッカー 3.0 | 31.3 KB | 49.43％ | 10.4 KB | 38.46％ |
| YuiJsMinifier | YUI JS Compressor for .Net 2.2.0.0 | 28.8 KB | 53.47％ | 10.0 KB | 40.83％ |
| ClosureLocalJsMinifier | Closure Compiler Application 04/11/2013（シンプルモード） | 28.1 KB | 54.60％ | 9.7 KB | 42.60％ |
| MicrosoftAjaxJsMinifier | Microsoft Ajax JS Minifier 4.92 | 28.3 KB | 54.28％ | 9.8 KB | 42.01％ |
| UglifyJsMinifier | UglifyJS 2.3.6 | 28.3 KB | 54.28％ | 9.8 KB | 42.01％ |
予想通り、最初の場所はGoogle Closure Compilerミニマイザーです。 また、
Advanced
モードでは、さらに良い結果が得られることに注意してください。
CSSの最小化と同様に、Microsoft Ajax JS Minifierは、YUI JS Compressor for .Netよりも優れています。 さらに、
bootstrap.js
ファイルを圧縮すると、Microsoft Ajax JS MinifierとUglifyJSは同じ結果を示し、両方が2位になりました。
最も古いJSMinおよびPackerミニマイザーは、より悪い結果を示しました。 さらに、Packerによって最小化されたコードにはエラーが含まれていました。
結論
もちろん、検索大手のYandexとGoogleは、ミニマライザーの戦いに勝ちました。
しかし、Microsoftは怠idleではありませんでした。RonLoganのチームはWebGrease Semantic CSS Minifierの安定バージョンをまだリリースしていませんでしたが、Microsoft Ajax Minifierをまったく新しいレベルに引き上げることができました。
UglifyJSは、依然として世界で2番目のJSミニマイザーと見なすことができます。
一般に、客観的に見ると、進化の長い道のりを進んだ現代のすべての最小化アルゴリズムは、現在ほぼ同じ圧縮率を持っています。
世論調査
記事の最後で、調査に参加することをお勧めします。