🖐️ 🔽 🕺🏽 सीएसएस और जावास्क्रिप्ट न्यूनतम की प्रभावशीलता की तुलना (सितंबर 2013) 👧🏿 🏵️ ☮️

सस्ते ट्रांसफार्मर से कम से कम मॉड्यूल के लोगो

पिछली समीक्षा के प्रकाशन के बाद से, अतीत में, 3 महीने पहले से ही लगभग सभी माना जाने वाले न्यूनतम एल्गोरिदम (पैकर को छोड़कर) को अपडेट करने में कामयाब रहे। इसके अलावा, बंडल ट्रांसफॉर्मर में एक नया क्लीन-सीएसएस मिनिमाइज़र मॉड्यूल है - बंडलट्रांसफॉर्मर.क्लीन सीएसएस।

इस तुलनात्मक समीक्षा को तैयार करने में, पाठकों की निम्नलिखित इच्छाओं को ध्यान में रखा गया:

पिछली समीक्षा में, निम्न फ़ाइलों को स्रोत फ़ाइलों के रूप में उपयोग किया गया था: ट्विटर बूटस्ट्रैप 2.3.2 से bootstrap.css और bootstrap.js । जेएस , जिसके कारण परिणामों की विश्वसनीयता कम थी। नई समीक्षा में, नमूना आकार में वृद्धि की गई थी: तुलना के लिए, 10 लोकप्रिय ओपन सोर्स परियोजनाओं से 7 जेएस फाइलें और 5 सीएसएस फाइलें चुनी गईं।
अब, CSS मिनिमाइज़र की तुलना में LESS और Sass प्रीप्रोसेसर के लिए बिल्ट-इन मिनिमाइज़ेशन टूल शामिल हैं।
जैसा कि आप जानते हैं, बंडल ट्रांसफार्मर प्रत्येक फ़ाइल को व्यक्तिगत रूप से छोटा करता है और फिर एक फ़ाइल में न्यूनतम कोड को जोड़ता है। यह तंत्र पहले की कम से कम फ़ाइलों को फिर से कम करने से रोकने के लिए बनाया गया है। अन्य समान लाइब्रेरीज़ पहले फ़ाइल कोड को मर्ज करती हैं और फिर इस मर्ज की गई फ़ाइल को छोटा करती हैं। इसलिए, पूर्णता के लिए, हम 2 तुलना करेंगे: सबसे पहले, हम न्यूनतम कोड के संयोजन द्वारा प्राप्त फ़ाइलों पर न्यूनतम की प्रभावशीलता की तुलना करते हैं, और फिर फ़ाइलों के संयुक्त कोड को न्यूनतम करके प्राप्त फ़ाइलों पर।

पिछली समीक्षा में, हम फ़ाइलों को कम करने के लिए बंडल ट्रांसफार्मर मॉड्यूल का उपयोग करेंगे, और प्राप्त फ़ाइलों के आकार को मापने के लिए YSlow एक्सटेंशन।

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

निम्नलिखित सीएसएस न्यूनतम एल्गोरिदम की तुलना करें:

तालिका 1. एडेप्टर और सीएसएस न्यूनतम एल्गोरिदम के बारे में जानकारी

अनुकूलक	न्यूनतमकरण एल्गोरिथ्म	स्रोत लाइब्रेरी साइट
`YuiCssMinifier`	YUI CSS कंप्रेसर .Net 2.3.0.0 के लिए	http://yuicompressor.codeplex.com
`MicrosoftAjaxCssMinifier`	Microsoft अजाक्स सीएसएस न्यूनतम 4.97	http://ajaxmin.codeplex.com
`KryzhanovskyCssMinifier`	सीएसएसओ 1.3.8	http://github.com/css/csso
`WgCssMinifier`	वेबगेट सेमेटिक सीएसएस मिनिफायर 1.5.2	http://webgrease.codeplex.com
`CleanCssMinifier`	साफ-सीएसएस 1.1.1	http://github.com/GoalSmashers/clean-css
`LessTranslator`	1.4.2 LESS (संपीड़न मोड स्रोत लाइब्रेरी की सेटिंग्स से मेल खाता है, जिसमें `compress` विकल्प `true` बराबर `true` )	http://lesscss.org
`SassAndScssTranslator`	सैस 3.2.10 (संपीड़न मोड स्रोत लाइब्रेरी की सेटिंग्स से मेल खाता है `:style` `compressed` बराबर `:style` विकल्प)	http://sass-lang.com

LessTranslator और SassAndScssTranslator अनुवादक एडेप्टर को न्यूनतम के रूप में उपयोग करने के लिए, आपको स्रोत CSS फ़ाइलों के एक्सटेंशन को .scss (और .scss क्रमशः) में useNativeMinification और true करने के लिए सेट करें।

स्रोत फ़ाइलों के रूप में हम उपयोग करेंगे:

bootstrap.css ट्विटर बूटस्ट्रैप 3.0.0 से
jQuery यूआई 1.10.3 से jquery-ui-1.10.3.custom.css
animate.css को चेतन
hint.css से Hint.css 1.3.0
zocial.css CSS सामाजिक बटन दिनांक 12/02/2012 से zocial.css

संयुक्त फ़ाइल का आकार 296.2 KB है, और GZip संपीड़न लागू करने के बाद - 98.7 KB।

तालिका 2. व्यक्तिगत रूप से प्रत्येक फ़ाइल के लिए CSS न्यूनतमकरण एल्गोरिदम लागू करने का परिणाम है

अनुकूलक	आकार कम करने के बाद, KB	बचत		GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	GZip संपीड़न पर बचत
अनुकूलक	आकार कम करने के बाद, KB	केबी में	% में	GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	केबी में	% में
`YuiCssMinifier`	239.7	56.5	19.07	79.9	18.8	19,05
`MicrosoftAjaxCssMinifier`	238.7	57.5	19.41	79.5	19.2	19.45
`KryzhanovskyCssMinifier`	234.1	62.1	20.97	78.0	20.7	20.97
`WgCssMinifier`	-	-	-	-	-	-
`CleanCssMinifier`	240.6	55.6	18.77	80.2	18.5	18.74
`LessTranslator`	240.0	56.2	18.97	80.0	18.7	18.95
`SassAndScssTranslator`	241.2	55.0	18.57	80.4	18.3	18.54

तालिका 3. एक मर्ज किए गए फ़ाइल में CSS न्यूनतमकरण एल्गोरिदम लागू करने का परिणाम

अनुकूलक	आकार कम करने के बाद, KB	बचत		GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	GZip संपीड़न पर बचत
अनुकूलक	आकार कम करने के बाद, KB	केबी में	% में	GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	केबी में	% में
`YuiCssMinifier`	239.7	56.5	19.07	79.9	18.8	19,05
`MicrosoftAjaxCssMinifier`	238.7	57.5	19.41	79.5	19.2	19.45
`KryzhanovskyCssMinifier`	232.4	63.8	21.54	77.4	21.3	21.58
`WgCssMinifier`	-	-	-	-	-	-
`CleanCssMinifier`	240.6	55.6	18.77	80.2	18.5	18.74
`LessTranslator`	240.0	56.2	18.97	80.0	18.7	18.95
`SassAndScssTranslator`	241.2	55.0	18.57	80.4	18.3	18.54

अंजीर। 1. CSS न्यूनतमकरण एल्गोरिदम के उपयोग के माध्यम से बचत (प्रतिशत में)

ग्राफ स्पष्ट रूप से दिखाता है कि पिछली बार की तरह, सबसे अच्छा परिणाम यैंडेक्स से सीएसएसओ मिनिमाइज़र (सीएसएस ऑप्टिमाइज़र) द्वारा दिखाया गया था। लेकिन यह मरहम में एक मक्खी के बिना नहीं था: फॉर्म की दो टिप्पणियों को हटाकर संयुक्त फ़ाइल को संपीड़ित करने पर 0.57% का अतिरिक्त लाभ: /*! - */ /*! - */ । एक नियम के रूप में, ऐसी टिप्पणियों में पुस्तकालय और इसके डेवलपर्स के संस्करण के बारे में जानकारी होती है। CSSO केवल ऐसी पहली टिप्पणी छोड़ता है, और बाकी को हटा देता है (UPD2 देखें)।

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

सबसे अधिक, नवागंतुक ने मुझे आश्चर्यचकित किया - गोल स्मैशर्स से क्लीन-सीएसएस ! । Node.js समुदाय में सीएसएस मिनिमाइज़र इतना लोकप्रिय है (क्लीन-सीएसएस का इस्तेमाल ग्रंट-कॉर्बिन-सीस्मीन पैकेज द्वारा किया जाता है) मुझे कम से कम संपीड़न की उम्मीद थी। कम से कम दक्षता के संदर्भ में, यह लेस और सैस प्रीप्रोसेसर के बिल्ट-इन मिनिमाइज़र के बीच स्थित है।

Microsoft से स्ट्रक्चरल मिनिमाइज़र का नया संस्करण - वेबग्रेस सेमेटिक सीएसएस मिनिफ़र में अभी भी महत्वपूर्ण त्रुटियाँ हैं:

यह @charset निर्देश और @-o-keyframes नियम को संसाधित नहीं कर सकता।
आंशिक मानों को रीसेट करता है जो एक से कम हैं।

इसलिए, WebGrease Semantic CSS Minifier फिर से लड़ाई से बाहर है।

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

अतिरिक्त लाइन टूट जाती है जो अलग-अलग फ़ाइलों के कोड को हटा दिया गया है।
कई @charset निर्देशों को एक में मिला दिया गया है।

इसलिए, हम यह निष्कर्ष निकाल सकते हैं: संयुक्त कोड वाली फ़ाइल को व्यावहारिक रूप से कम करना फ़ाइल आकार में लाभ नहीं देता है।

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

निम्नलिखित JS कोड न्यूनतमकरण एल्गोरिदम की तुलना करें:

तालिका 4. एडेप्टर और जेएस कोड की जानकारी कम से कम एल्गोरिदम

अनुकूलक	न्यूनतमकरण एल्गोरिथ्म	स्रोत लाइब्रेरी साइट
`CrockfordJsMinifier`	03/29/2013 को JSMin	http://github.com/douglascrockford/JSMin
`YuiJsMinifier`	YUI JS कंप्रेसर .Net 2.3.0.0 के लिए	http://yuicompressor.codeplex.com
`ClosureLocalJsMinifier`	08/26/2013 से क्लोजर कंपाइलर एप्लिकेशन ( `Simple` मोड)	http://developers.google.com/closure/compiler/docs/gettingstarted_app
`MicrosoftAjaxJsMinifier`	माइक्रोसॉफ्ट अजाक्स जेएस मिनिफायर 4.97	http://ajaxmin.codeplex.com
`UglifyJsMinifier`	UglifyJS 2.4.0	http://github.com/mishoo/UglifyJS2

यदि आपने पहले ही ध्यान दिया है, तो EdwardsJsMinifier मिनिमाइज़र एडॉप्टर ऊपर दी गई सूची में नहीं है। 2007 के बाद से उनके द्वारा समर्थित न्यूनतमकरण एल्गोरिथ्म, पैकर 3.0 नहीं बदला है, मैंने इसे इस समीक्षा में शामिल नहीं करने का फैसला किया है।

स्रोत फ़ाइलों के रूप में हम उपयोग करेंगे:

ट्विटर बूटस्ट्रैप 3.0.0 से bootstrap.js
jQuery यूआई 1.10.3 से jquery-ui-1.10.3.custom.js
MicrosoftAjax.debug.js AJAX फ्रेमवर्क 4.0.0.0 से MicrosoftAjax.debug.js
knockout-2.3.0.debug.js 2.3.0
jsrender.js से JsRender 1.0.0-Beta
linq.js LINQ से जावास्क्रिप्ट के लिए 2.2.0.2
moment.js मोमेंट.जेएस 2.1.0 से

संयुक्त फ़ाइल का आकार 1218.9 KB है, और GZip-संपीड़न - 406.3 KB को लागू करने के बाद।

तालिका 5. व्यक्तिगत रूप से प्रत्येक फ़ाइल के लिए जेएस-न्यूनतमकरण एल्गोरिदम लागू करने का परिणाम है

अनुकूलक	आकार कम करने के बाद, KB	बचत		GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	GZip संपीड़न पर बचत
अनुकूलक	आकार कम करने के बाद, KB	केबी में	% में	GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	केबी में	% में
`CrockfordJsMinifier`	713.5	505.4	41,46	237.8	168.5	41.47
`YuiJsMinifier`	593.0	625.9	51.35	197.6	208.7	51.37
`ClosureLocalJsMinifier`	525.4	693.5	56.90	175.1	231.2	56.90
`MicrosoftAjaxJsMinifier`	527.7	691.2	56.71	175.9	230.4	56.71
`UglifyJsMinifier`	531.1	687.8	56.43	177.0	229.3	56.44

तालिका 6. संयुक्त फाइल में JS-न्यूनकरण एल्गोरिदम लागू करने का परिणाम है

अनुकूलक	आकार कम करने के बाद, KB	बचत		GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	GZip संपीड़न पर बचत
अनुकूलक	आकार कम करने के बाद, KB	केबी में	% में	GZip संपीड़न, KB के साथ न्यूनतम करने के बाद आकार	केबी में	% में
`CrockfordJsMinifier`	713.4	505.5	41.47	237.8	168.5	41.47
`YuiJsMinifier`	593.0	625.9	51.35	197.6	208.7	51.37
`ClosureLocalJsMinifier`	525.3	693.6	56.90	175.1	231.2	56.90
`MicrosoftAjaxJsMinifier`	527.7	691.2	56.71	175.9	230.4	56.71
`UglifyJsMinifier`	533.1	685.8	56.26	177.7	228.6	56.26

अंजीर। 2. जेएस-न्यूनतमकरण एल्गोरिदम के उपयोग के कारण बचत (प्रतिशत में)

उपरोक्त आंकड़ों से यह स्पष्ट है कि Google से क्लोजर कंपाइलर न्यूनतम अभी भी पहले स्थान पर है।

Microsoft Ajax JS Minifier ने इस बार UglifyJS को पछाड़ दिया और दूसरा स्थान हासिल किया।

सामान्य तौर पर, UglifyJS ने मुझे इस तथ्य से बहुत आश्चर्यचकित किया कि संयुक्त कोड के साथ फ़ाइल को कम करते समय, परिणामी फ़ाइल का आकार न केवल कम हो गया, बल्कि बढ़ गया। जो एल्गोरिथम में कुछ खामियों की बात करता है।

.Net के लिए YUI JS कंप्रेसर पहले तीन मिनिमाइज़र से बहुत पीछे है, जो इसके एल्गोरिदम की अप्रचलनता को इंगित करता है।

इस तथ्य के बावजूद कि जेएसएमिन अभी भी विकसित हो रहा है, इसमें निर्धारित सिद्धांत समान बने हुए हैं: स्क्रिप्ट तर्क के साथ कोई हस्तक्षेप नहीं, केवल टिप्पणियों और व्हाट्सएप को हटाने। इसलिए, इस समीक्षा में, JSMin प्रतिभागी भी नहीं है, लेकिन एक कम सीमा के रूप में कार्य करता है।

जैसा कि सीएसएस न्यूनतम के मामले में, हमें संयुक्त कोड के साथ फ़ाइल को कम करने से बहुत कम लाभ मिला।

निष्कर्ष

पिछली बार की तरह, मिनिमाइज़र की लड़ाई को सर्च दिग्गज यांडेक्स और गूगल ने जीता था। यह जानकर अच्छा लगा कि एक रूसी कंपनी में सबसे अच्छा CSS मिनीमाइज़र बनाया गया।

WebGrease Semantic CSS Minifier के साथ गंभीर समस्याओं के बावजूद, Microsoft ने Microsoft अजाक्स मिनिफाइज़र परिवार का न्यूनतम विकास करने में महत्वपूर्ण प्रगति की है।

सभी स्रोत और न्यूनतम फाइलें https://www.dropbox.com/s/k232cloh87sn9pr/css-and-js-minifiers-sep-2013-files.zip पर उपलब्ध हैं।

UPD1: रुचि प्रदर्शित करने के लिए रेखांकन को फिर से बनाएं ।

UPD2: "मरहम में उड़ान भरने" के बारे में सीएसएसओ को सर्गेई क्रेजानोवस्की (सीएसएसओ डेवलपर) की टिप्पणी मिली। वास्तव में, यह एक दोष नहीं है, लेकिन केवल संरचनात्मक न्यूनतमकरण की एक विशेषता है: जब आप स्टाइल शीट की संरचना बदलते हैं, तो ऐसी टिप्पणियां उस कोड से अलग हो सकती हैं, जिसे वे संदर्भित करते हैं और स्टाइल शीट में "लटका" करते हैं। इसलिए, केवल पहली टिप्पणी सहेजी गई है। यहां स्थिति क्लोजर कंपाइलर के साथ समान स्थिति के समान है, जो जब जेएस कोड को संरचनात्मक रूप से न्यूनतम करता है, तो सभी टिप्पणियों को बिल्कुल हटा देता है।

UPD3: मैंने सीएसएस-मिनिमाइज़र क्लोजर स्टाइल्सशीट्स के साथ परीक्षण करने की कोशिश की। सबसे पहले मैंने बाइनरी के नवीनतम उपलब्ध संस्करण का परीक्षण किया - क्लोजर-स्टाइलशीट्स -20171230.जर और bootstrap.css फ़ाइल को कम करते हुए एक त्रुटि मिली। तब मैंने स्रोत से नवीनतम संस्करण एकत्र किया ( 86bb800d79a3 ) और फिर bootstrap.css css फ़ाइल को कम करते हुए एक त्रुटि प्राप्त की:

 Compiler parsing error: Parse error in C:\!closure-stylesheets\bootstrap.css at line 1658 column 19: margin-top: 1px \9; ^ com.google.common.css.compiler.ast.GssParserException: Parse error in C:\!closure-stylesheets\bootstrap.css at line 1658 column 19: margin-top: 1px \9; ^ at com.google.common.css.compiler.ast.GssParserCC.parse(GssParserCC.java:176) at com.google.common.css.compiler.ast.GssParser.parse(GssParser.java:46) at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.parseAndPrint(DefaultCommandLineCompiler.java:104) at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.compile(DefaultCommandLineCompiler.java:94) at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.execute(DefaultCommandLineCompiler.java:129) at com.google.common.css.compiler.commandline.ClosureCommandLineCompiler.executeJob(ClosureCommandLineCompiler.java:290) at com.google.common.css.compiler.commandline.ClosureCommandLineCompiler.main(ClosureCommandLineCompiler.java:356) Caused by: com.google.common.css.compiler.ast.ParseException: Encountered " <BAD_TOKEN> "\\ "" at line 1658, column 19. Was expecting one of: ";" ... "/" ... "=" ... "}" ... "," ... <S> ... <IMPORTANT_SYM> ... <ATKEYWORD> ... at com.google.common.css.compiler.ast.GssParserCC.generateParseException(GssParserCC.java:3756) at com.google.common.css.compiler.ast.GssParserCC.jj_consume_token(GssParserCC.java:3635) at com.google.common.css.compiler.ast.GssParserCC.ruleSet(GssParserCC.java:464) at com.google.common.css.compiler.ast.GssParserCC.block(GssParserCC.java:2856) at com.google.common.css.compiler.ast.GssParserCC.start(GssParserCC.java:2903) at com.google.common.css.compiler.ast.GssParserCC.parse(GssParserCC.java:174) ... 6 more

इसके अलावा, मैंने jquery-ui-1.10.3.custom.css और animate.css को कम करने का भी प्रयास किया, और फिर से त्रुटियां jquery-ui-1.10.3.custom.css ।

इसलिए, वेबस्ट्रीम सिमेंटिक सीएसएस मिनिफायर की तरह क्लोजर स्टाइल्सशीट्स इस समीक्षा के तुलनात्मक परीक्षणों में भाग नहीं ले सकते हैं।

UPD4: स्रोत और न्यूनतम फ़ाइलों के साथ संग्रह में एक लिंक जोड़ा गया - https://www.dropbox.com/s/k232cloh87sn9pr/css-and-js-minifiers-sep-2013-files.zip ।

साक्षात्कार

लेख के अंत में, मेरा सुझाव है कि आप सर्वेक्षण में भाग लें। यदि आपको उत्तर विकल्पों की सूची में अपना न्यूनतम पता नहीं लगा है, तो `अन्य` विकल्प का चयन करें, और फिर टिप्पणियों में इसके नाम और डेवलपर्स साइट के पते का संकेत दें।

सीएसएस और जावास्क्रिप्ट न्यूनतम की प्रभावशीलता की तुलना (सितंबर 2013)

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

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

निष्कर्ष

साक्षात्कार

More articles: