CSSとJavaScriptミニマイザーのパフォーマンスの比較

Bundle Transformerの最小化モジュールのロゴ

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圧縮の節約
YuicssmininifierYUI CSS Compressor for .Net 2.2.0.0106.0 KB16.73%24.5 KB12.19%
MicrosoftAjaxCssMinifierMicrosoft Ajax CSS Minifier 4.92105.7 KB16.97%24.5 KB12.19%
クリジャノフスキーCssMinifierCSSO 1.3.7105.6 KB17.05%24.6 KB11.83%
WgCssMinifierWebGrease 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圧縮の節約
CrockfordJsMinifier2007年5 月22日のJSMin34.5 KB44.26%11.1 KB34.32%
EdwardsJsMinifierパッカー 3.031.3 KB49.43%10.4 KB38.46%
YuiJsMinifierYUI JS Compressor for .Net 2.2.0.028.8 KB53.47%10.0 KB40.83%
ClosureLocalJsMinifierClosure Compiler Application 04/11/2013(シンプルモード)28.1 KB54.60%9.7 KB42.60%
MicrosoftAjaxJsMinifierMicrosoft Ajax JS Minifier 4.9228.3 KB54.28%9.8 KB42.01%
UglifyJsMinifierUglifyJS 2.3.628.3 KB54.28%9.8 KB42.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ミニマイザーと見なすことができます。

一般に、客観的に見ると、進化の長い道のりを進んだ現代のすべての最小化アルゴリズムは、現在ほぼ同じ圧縮率を持っています。

世論調査


記事の最後で、調査に参加することをお勧めします。

Source: https://habr.com/ru/post/J181880/


All Articles