2010-07-01 12 views
15

मैं सोच रहा था कि पैकर बनाम खनिज के अंतर/लाभ क्या थे, यानी क्या आपको अपने वेब ऐप में पैक या मिनी संस्करण को तैनात करना चाहिए?जावास्क्रिप्ट पैकर बनाम minifier

उदाहरण कोड:

var layout = { 

    NAVVISIBLE : 1, 

    Init : function() 
    { 
     this.Resize(); 
    }, 

    Dimensions : function() 
    { 
     var d = document, s = self, w, h; 
     if (s.innerHeight) 
     { w = s.innerWidth; h = s.innerHeight; } 
     else if (d.documentElement && d.documentElement.clientHeight) 
     { w = d.documentElement.clientWidth; h = d.documentElement.clientHeight; } 
     else if (d.body) 
     { w = d.body.clientWidth; h = d.body.clientHeight; } 
     return new Array(parseInt(w), parseInt(h)); 
    }, 

    Resize : function() 
    { 
     var dim = this.Dimensions(); 
     try 
     { 
      $('tbl_container').width = px(dim[0] - 25); 
      $('row_container').height = px(dim[1] - 100); 
      $('dat_container').width = px(dim[0] - (this.NAVVISIBLE ? 275 : 25)); 
      $('dat_container').height = px(dim[1] - 100); 
     } 
     catch(e) {} 
    }, 

    GoSideways : function() 
    { 
     var nc = $('nav_container'); 
     var dc = $('dat_container'); 
     nc.style.display = this.NAVVISIBLE ? 'none' : ''; 
     dc.width = px(parseInt(dc.width) + (this.NAVVISIBLE ? 250 : -250)); 
     this.NAVVISIBLE ^= 1; 
    }, 

    FrameLoad : function(url) 
    { 
     if (url) 
      content_frame.document.location = url; 
    } 
}; 

न्यूनतम किया गया:

var layout={NAVVISIBLE:1,Init:function() 
{this.Resize();},Dimensions:function() 
{var d=document,s=self,w,h;if(s.innerHeight) 
{w=s.innerWidth;h=s.innerHeight;} 
else if(d.documentElement&&d.documentElement.clientHeight) 
{w=d.documentElement.clientWidth;h=d.documentElement.clientHeight;} 
else if(d.body) 
{w=d.body.clientWidth;h=d.body.clientHeight;} 
return new Array(parseInt(w),parseInt(h));},Resize:function() 
{var dim=this.Dimensions();try 
{$('tbl_container').width=px(dim[0]-25);$('row_container').height=px(dim[1]-100);$('dat_container').width=px(dim[0]-(this.NAVVISIBLE?275:25));$('dat_container').height=px(dim[1]-100);} 
catch(e){}},GoSideways:function() 
{var nc=$('nav_container');var dc=$('dat_container');nc.style.display=this.NAVVISIBLE?'none':'';dc.width=px(parseInt(dc.width)+(this.NAVVISIBLE?250:-250));this.NAVVISIBLE^=1;},FrameLoad:function(url) 
{if(url) 
content_frame.document.location=url;}}; 

पैक:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5 B={3:1,C:6(){2.n()},v:6(){5 d=k,s=y,w,h;9(s.u){w=s.A;h=s.u}r 9(d.a&&d.a.c){w=d.a.p;h=d.a.c}r 9(d.b){w=d.b.p;h=d.b.c}D z x(g(w),g(h))},n:6(){5 7=2.v();F{$(\'N\').8=4(7[0]-o);$(\'P\').m=4(7[1]-l);$(\'i\').8=4(7[0]-(2.3?E:o));$(\'i\').m=4(7[1]-l)}L(e){}},H:6(){5 t=$(\'I\');5 j=$(\'i\');t.J.G=2.3?\'Q\':\'\';j.8=4(g(j.8)+(2.3?q:-q));2.3^=1},M:6(f){9(f)O.k.K=f}};',53,53,'||this|NAVVISIBLE|px|var|function|dim|width|if|documentElement|body|clientHeight|||url|parseInt||dat_container|dc|document|100|height|Resize|25|clientWidth|250|else||nc|innerHeight|Dimensions||Array|self|new|innerWidth|layout|Init|return|275|try|display|GoSideways|nav_container|style|location|catch|FrameLoad|tbl_container|content_frame|row_container|none'.split('|'),0,{})) 
+1

भूलें [Google क्लोजर कंपाइलर] (http://code.google.com/closure/compiler/) या तो ... बहुत सारे जेएस पुस्तकालय इसका उपयोग करके संपीड़न या पैक के बजाय अपने संपीड़न के लिए उपयोग कर रहे हैं (jQuery इसका उपयोग करता है!)। – gnarf

उत्तर

16

पैक्ड छोटा होता है लेकिन धीमी है।

और डीबग करने के लिए भी कठिन।

अधिकांश प्रसिद्ध ढांचे और प्लगइन्स केवल न्यूनतम हैं।

Google minifier पर एक नज़र डालें: http://code.google.com/intl/en-EN/closure/compiler/ वे मिनी कोड को डिबग करने के लिए फ़ायरबग प्लगइन प्रदान करते हैं।

+1

[Google क्लोजर कंपाइलर] (http://closure-compiler.appspot.com/home) अक्सर अपने स्वयं के अनुभव से [माइक्रोसॉफ्ट अजाक्स मिनीफायर] (http://sundgaard.dk/javascript-minify.aspx) की तुलना में बड़ी फाइलें उत्पन्न करता है जब तक आप ADVANCED_OPTIMIZATIONS ध्वज का उपयोग नहीं करते हैं, जो संभवतः आपके कोड को तोड़ देगा और उत्पादन के उपयोग में बहुत व्यावहारिक नहीं है। मैं लोगों को ऊपर दिए गए दोनों उपकरणों का उपयोग करने के लिए प्रोत्साहित करता हूं और जो भी कोड छोटा होता है उसका उपयोग करता हूं। – 10basetom

+0

@ 10basetom दोनों एक साथ क्यों उपयोग नहीं करते? पहले जीसीसी करो, और फिर एमएएम। माइक्रोसॉफ्ट का टूल जीसीसी द्वारा उत्पादित कोड से कुछ और बाइटों को पट्टी लगाना प्रतीत होता है। – tomasz86

1

पैक किए गए कोड के आधार पर, पैक किए गए समाधान सीए स्क्रिप्ट-त्रुटियों का कारण बनते हैं, जबकि minified काम करेगा।

तो अपने कोड को पैक करने के बाद, विभिन्न ब्राउज़रों के साथ परीक्षण करें। यदि यह अब काम नहीं करता है, तो न्यूनतम संस्करण का प्रयास करें, जो हमेशा काम करना चाहिए।

3

दोनों का उद्देश्य क्लाइंट ब्राउज़र पर तेज़ डाउनलोड सक्षम करने के लिए जावास्क्रिप्ट के आकार को कम करना है।

मिनीफायर केवल सफेद स्पेस वर्णों जैसे अनावश्यक चीज़ों को हटा देता है और जहां भी संभव हो, छोटे नामों में वैरिएबल का नाम बदलता है। लेकिन एक पैकर एक कदम आगे जाता है और जावास्क्रिप्ट के आकार को कम करने के लिए जो कुछ भी कर सकता है वह करता है। उदाहरण के लिए यह क्लाइंट द्वारा मूल्यांकन किए जाने वाले मैपिंग को संरक्षित करते समय स्रोत कोड को बेस 62 में परिवर्तित करता है।

+2

मिनीफायर आमतौर पर चर का नाम बदलते हैं। – mhenry1384

+0

सहमत हुए। कई मिनीफायर भी इसके लिए विकल्प प्रदान करता है। – IsmailS

14

पैकर और अधिक तो वर्रों और तर्कों का नाम बदलता है, यह वास्तव में बेस 62 का उपयोग करके स्रोत कोड को मानचित्र करता है जिसे उपयोग करने के लिए eval() के माध्यम से क्लाइंट पक्ष पर पुनर्निर्मित किया जाना चाहिए।

साइड स्टेपिंग ईपल() यहां बुराई समस्या है, यह पेज लोड के दौरान क्लाइंट पर बड़ी मात्रा में ओवरहेड भी बना सकता है जब आप jQuery की तरह बड़े जेएस पुस्तकालयों को पैक करना शुरू करते हैं। यह केवल आपके उत्पादन जेएस पर ही सीमित करने की सिफारिश है, क्योंकि यदि आपके पास पैकिंग या मिनीफ़ी करने की आवश्यकता के लिए पर्याप्त कोड है, तो आपके पास पृष्ठ लोड के दौरान क्लाइंट को चकित करने के लिए पर्याप्त कोड है()।

एक अच्छा minifier के लिए, मैं गूगल की क्लोजर संकलक http://code.google.com/closure/compiler/

का उपयोग कर SIMPLE_OPTIMIZATIONS मोड मैं का उपयोग कर, क्या सिफारिश करेंगे के रूप में यह खाली स्थान के/टिप्पणियों और munges (कम कर देता है) चर साफ है देने का प्रयास करेगा। यह कुछ सरल कोड परिवर्तन भी करता है जो मूल रूप से कोड साफ़ करने और माइक्रो ऑप्टिमाइज़ेशन की मात्रा में होते हैं। आप क्लोजर कंपाइलर एप्लिकेशन या पैक किए गए रीडमे को चेक आउट करने के साथ प्रारंभ करने के बारे में और अधिक देख सकते हैं।

वाईयूआई कंप्रेसर एक और विकल्प है (याहू से) लेकिन यह फ़ाइल आकार को जितना सीसी करता है उतना कम नहीं करता है। माइक्रोसॉफ्ट से भी एक उपकरण है, नाम इस समय मुझे बच निकला है लेकिन यह स्पष्ट रूप से सीसी के समान परिणाम प्रदान करता है। यह आपके पर्यावरण के आधार पर बेहतर या खराब विकल्प हो सकता है। मैंने इसे पास करने में केवल इसके बारे में पढ़ा है, इसलिए आगे की जांच की आवश्यकता होगी।

0

एक "पैकर" एक "मिनीफायर" जैसा ही है। सबसे आम उपकरण जो स्वयं को "पैकर" कहता है http://dean.edwards.name/packer/ है जो बेस 62 एन्कोड में विकल्प (डिफ़ॉल्ट रूप से बंद) देता है। बेस 62 एन्कोडिंग शायद एक बुरा विचार है: https://stackoverflow.com/a/1351624/24267

+1

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

+2

यदि आपके पास डीन एडवर्ड्स "पैकर" में बेस 62 एन्कोडिंग बंद है, तो इसके लिए क्लाइंट-साइड eval की आवश्यकता नहीं है। यह डिफ़ॉल्ट रूप से बंद कर दिया गया है। – mhenry1384

3

यदि आपका सर्वर ब्राउज़र पर भेजने से पहले फ़ाइलों को gzips (जो अक्सर होता है) तो पैकर जाने का तरीका नहीं है। मैंने कई फाइलों का परीक्षण किया है, और भले ही पैकर छोटी फ़ाइलों की तुलना में छोटी फाइलें बनाता है, यह बड़ी ज़िप्ड फाइलें बनाता है। जबकि मैं एक विशेषज्ञ नहीं हूं, मुझे लगता है कि कारण काफी सीधे है।

ज़िप का एक बड़ा हिस्सा बार-बार चरित्र अनुक्रमों को ढूंढना है और उन्हें बाद में अनपॅक किए जाने के लिए एक छोटे स्थान धारक के साथ प्रतिस्थापित करना है। ज़िप एल्गोरिदम को छोड़कर यह वही चीज है जो पैकर करता है, सिवाय इसके कि अधिक कुशल हैं। तो जब आप एक फ़ाइल पैक करते हैं तो आप इसे पूर्व-ज़िप करने के तरीके में हैं, लेकिन एक एल्गोरिदम के साथ जो वास्तविक ज़िप फ़ाइल से कम कुशल है। ज़िपिंग दक्षता में बाद में कमी के साथ, ज़िप एल्गोरिदम के लिए यह कम काम छोड़ देता है।

तो यदि आप फ़ाइलों को ज़िप कर रहे हैं, तो पैकर वास्तव में बड़े डाउनलोड का उत्पादन करेगा। इसमें उपर्युक्त उत्तरों में वर्णित पैकर के अतिरिक्त डाउनसाइड्स जोड़ें, और पैकर का उपयोग करने के लिए वास्तव में कोई अच्छा कारण नहीं है।

संबंधित मुद्दे