सीएसएस और जावास्क्रिप्ट न्यूनतम के प्रदर्शन की तुलना करना

बंडल ट्रांसफ़ॉर्मर का उपयोग करने वाले डेवलपर्स मुझसे अक्सर पूछते हैं: "किस संपीड़न का उच्चतम संपीड़न अनुपात है?" असल में, पिछले साल सितंबर में, मेरे लेख में "बंडल ट्रांसफॉर्मर 1.6.2 बाहर आया था, या आधे साल में क्या बदल गया है?" मैंने पहले से ही कोड संपीड़न के मामले में न्यूनतम की तुलना की थी, लेकिन यह तुलना सतही थी और संख्याओं द्वारा समर्थित नहीं थी।

इस छोटे से लेख में, हम एक उदाहरण के रूप में बंडल ट्रांसफॉर्मर मिनिमाइज़र एडेप्टर का उपयोग करते हुए सबसे लोकप्रिय सीएसएस और जेएस कोड न्यूनतमकरण एल्गोरिदम की तुलना करेंगे। bootstrap.css और Twitter बूटस्ट्रैप संस्करण 2.3.2 से bootstrap.js फ़ाइलों को स्रोत फ़ाइलों के रूप में उपयोग किया जाएगा। हम YSlow का उपयोग करके फ़ाइल आकार मापेंगे।

सीएसएस मिनिमाइज़र तुलना

bootstrap.css स्रोत फ़ाइल का आकार 127.3 KB है, और GZip संपीड़न लागू करने के बाद, यह 27.9 KB है। तालिका में विभिन्न CSS न्यूनतमकरण एल्गोरिदम को bootstrap.css फ़ाइल पर लागू करके प्राप्त फ़ाइल आकार के बारे में जानकारी है:

न्यूनतम अनुकूलक	न्यूनतमकरण एल्गोरिथ्म	न्यूनतम करने के बाद आकार	बचत	GZip संपीड़न के साथ कम से कम आकार के बाद	GZip संपीड़न पर बचत
YuiCssMinifier	YUI CSS कंप्रेसर .Net 2.2.0.0 के लिए	106.0 केबी	16.73%	24.5 केबी	12.19%
MicrosoftAjaxCssMinifier	Microsoft अजाक्स सीएसएस न्यूनतम 4.92	105.7 केबी	16.97%	24.5 केबी	12.19%
KryzhanovskyCssMinifier	सीएसएसओ 1.3.7	105.6 केबी	17.05%	२४.६ केबी	11.83%
WgCssMinifier	WebGrease Semantic CSS Minifier 1.3.0	-	-	-	-

तालिका से पता चलता है कि सबसे अच्छा परिणाम यैंडेक्स से सीएसएसओ मिनिमाइज़र (सीएसएस ऑप्टिमाइज़र) द्वारा दिखाया गया था। इस न्यूनतम का मुख्य लाभ सीएसएस-कोड के संरचनात्मक न्यूनतमकरण के लिए समर्थन है (संरचनात्मक न्यूनतमीकरण बीईएम पद्धति वेबसाइट पर अधिक विस्तार से पाया जा सकता है)।

दुर्भाग्यवश, Microsoft का संरचनात्मक न्यूनतम, WebGrease Semantic CSS Minifier, लड़ाई से बाहर हो गया क्योंकि यह bootstrap.css .css फ़ाइल को कम नहीं कर सका।

Microsoft से एक और न्यूनतम - Microsoft Ajax CSS Minifier, इसके विपरीत, .Net के लिए इसके मुख्य प्रतियोगी YUI CSS कंप्रेसर की तुलना में बहुत अच्छा परिणाम दिखा।

जेएस कोड मिनिमाइज़र तुलना

bootstrap.js स्रोत फ़ाइल का आकार 61.9 KB है, और GZip संपीड़न लागू करने के बाद, यह 16.9 KB है। तालिका में विभिन्न जेएस न्यूनीकरण एल्गोरिदम को bootstrap.js फाइल पर लागू करके प्राप्त फ़ाइल आकार के बारे में जानकारी है:

न्यूनतम अनुकूलक	न्यूनतमकरण एल्गोरिथ्म	न्यूनतम करने के बाद आकार	बचत	GZip संपीड़न के साथ कम से कम आकार के बाद	GZip संपीड़न पर बचत
CrockfordJsMinifier	05/22/2007 को JSMin	34.5 केबी	44.26%	11.1 केबी	34.32%
EdwardsJsMinifier	पैकर 3.0	31.3 केबी	49.43%	10.4 केबी	38.46%
YuiJsMinifier	YUI JS कंप्रेसर .Net 2.2.0.0 के लिए	28.8 केबी	53.47%	10.0 केबी	40.83%
ClosureLocalJsMinifier	क्लोजर कंपाइलर एप्लीकेशन 04/11/2013 (सरल मोड)	28.1 केबी	54.60%	9.7 केबी	42.60%
MicrosoftAjaxJsMinifier	माइक्रोसॉफ्ट अजाक्स जेएस मिनिफायर 4.92	28.3 केबी	54.28%	9.8 केबी	42.01%
UglifyJsMinifier	UglifyJS 2.3.6	28.3 केबी	54.28%	9.8 केबी	42.01%

जैसी कि उम्मीद थी, पहला स्थान Google क्लोजर कंपाइलर न्यूनतम पर चला गया। यह भी ध्यान दिया जाना चाहिए कि Advanced मोड में, आप और भी बेहतर परिणाम प्राप्त कर सकते हैं।

जैसा कि CSS न्यूनतमकरण के साथ, Microsoft Ajax JS Minifier ने .Net के लिए YUI JS कंप्रेसर से बेहतर प्रदर्शन किया। इसके अलावा, जब bootstrap.js फ़ाइल को संपीड़ित किया जाता है, तो Microsoft अजाक्स जेएस मिनिफायर और उगलिस्त जेएस ने एक ही परिणाम दिखाया और दोनों ने 2 वां स्थान हासिल किया।

सबसे पुराने जेएसएमिन और पैकर मिनिमाइज़र ने बदतर परिणाम दिखाए। इसके अलावा, पैकर द्वारा कम से कम कोड में त्रुटियां थीं।

निष्कर्ष

बेशक, सर्च दिग्गज Yandex और Google ने मिनिमाइज़र की लड़ाई जीत ली।

लेकिन Microsoft निष्क्रिय नहीं था: हालांकि रॉन लोगान की टीम ने अभी तक वेबग्रेस सेमेटिक सीएसएस मिनिफायर का एक स्थिर संस्करण जारी नहीं किया था, वे माइक्रोसॉफ्ट अजाक्स मिनिफायर को एक नए स्तर पर ले जाने में सक्षम थे।

UglifyJS को अभी भी दुनिया में नंबर 2 जेएस मिनिमाइज़र माना जा सकता है।

सामान्य तौर पर, यदि आप उद्देश्यपूर्ण रूप से देखते हैं, तो सभी आधुनिक न्यूनतम एल्गोरिदम, एक लंबे विकासवादी पथ की यात्रा कर रहे हैं, वर्तमान में लगभग समान संपीड़न अनुपात है।

साक्षात्कार

लेख के अंत में, मेरा सुझाव है कि आप सर्वेक्षण में भाग लें: