गज़िप बनाम मिनिफाई


131

मैंने दूसरे दिन जावास्क्रिप्ट और सीएसएस बनाम किसी ऐसे व्यक्ति के बारे में चर्चा की, जो कि Gzip का उपयोग करना पसंद करता है।

मैं इस व्यक्ति को एक्स कहूंगा।

X ने कहा कि Gzip पहले से ही कोड को छोटा करता है, क्योंकि यह आपकी फ़ाइलों को ज़िप करता है।

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

मेरे पास परीक्षण का कोई तरीका नहीं है, लेकिन मेरा मानना ​​है कि इस कोड का Gzip:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

अभी भी इस कोड के Gzip से बड़ा होगा:

.a1{body:background-color:#FFF;padding:40px}

क्या कोई ऐसा है जो इस सही या गलत को साबित कर सके।
और कृपया यह मत कहो कि "यह सही है क्योंकि यही मैंने हमेशा उपयोग किया है"।

मैं यहां वैज्ञानिक प्रमाण मांग रहा हूं।


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

8
एक वैध बिंदु। फिर भी, मैं CSS / JS की सैकड़ों पंक्तियों के साथ आप लोगों को बोर नहीं करने जा रहा था, जब ऊपर दिखाया गया कोड उपयुक्त रूप से उस सिद्धांत को प्रदर्शित करता है जो मैं शोध करना चाहता था।
KdgDev

@JamesMcMahon एक मान्य बिंदु, लेकिन उत्तर नहीं।
एबी चौ यू होई

एक बात जो ध्यान देने योग्य होनी चाहिए वह है कैश लिमिट (यह ब्राउजर के आधार पर अलग-अलग होती है), लेकिन कुछ मोबाइल ब्राउजर्स अनजिप्ड फाइल साइज के आधार पर कैश करते हैं, और उन मामलों में मिनिमाइजेशन आपका दोस्त होता है। इसके अतिरिक्त मेरे पास 2meg JavaScript वेब ऐप है (टिप्पणियां और रिएक्ट्स और बाकी सब) जो कि जब minified (बदसूरत) और gzipped (zopfli कम्प्रेशन का उपयोग करके) 75k है (अकेले मेनिफ़िकेशन लगभग 200k है)।
vipero07

जवाबों:


192

परीक्षण करने के लिए बहुत सरल है। मैंने आपके js लिए, उन्हें अलग-अलग फाइलों में डाल दिया और उन पर gzip -9 दौड़ा दिया। यहाँ परिणाम है। यह एक WinXP मशीन पर किया गया था, जो Cygwin और gzip 1.3.12 पर चल रही थी।

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

यहाँ एक वास्तविक विश्व JS उदाहरण का उपयोग करके एक और परीक्षण किया गया है। स्रोत फ़ाइल "common.js" है मूल फ़ाइल का आकार 73134 बाइट्स है। न्यूनतम, यह 26232 बाइट्स के लिए आया था।

मूल फ़ाइल:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

न्यूनतम फ़ाइल:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

मूल फ़ाइल -9 विकल्प (ऊपर जैसा संस्करण):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

न्यूनतम फ़ाइल -9 विकल्प के साथ gzipped (ऊपर जैसा संस्करण):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

जैसा कि आप देख सकते हैं, विभिन्न तरीकों के बीच एक निश्चित अंतर है। सबसे अच्छी शर्त दोनों को छोटा करने के साथ-साथ उन्हें गज़िप करने की भी है।


9
रॉबर्ट, यह अंतिम विकल्प है
चक वॉस

4
71k से 26k ठेठ minification परिणाम नहीं है! मेरे परीक्षणों में, यह 20-25% की तरह अधिक था। यह भी प्रतीत होता है कि याहू को क्या मिला: developer.yahoo.com/performance/rules.html
दीपक

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

28

यहाँ एक परीक्षण के परिणाम हैं जो मैंने कुछ समय पहले अपनी वेबसाइट से "वास्तविक जीवन" सीएसएस फ़ाइल का उपयोग करके किया था। सीएसएस ऑप्टिमाइज़र का इस्तेमाल मिनिफिकेशन के लिए किया जाता है। उबंटू के साथ आने वाला मानक लिनक्स संग्रह ऐप का उपयोग गज़पिंग के लिए किया गया था।

मूल: 28,781 बाइट्स
न्यूनतम: 22,242 बाइट्स गज़्ड
: 6,969 बाइट्स
मिन + गज़िप : 5,990 बाइट्स

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

(नोट: अन्य समाधान भी हैं, जैसे कि फ़ाइल की सेवा करते समय इसे "ऑन-डिमांड" के माध्यम से चलाना और इसे फाइलसिस्टम में कैशिंग करना।)


आपको 14% अतिरिक्त बचत मिलती है। यह स्टीव सौडर्स के परिणामों से भी सहमत है। अपनी पुस्तक "हाई परफॉर्मेंस वेबसाइट्स" में, उनके पास gzip बनाम minification पर एक अनुभाग है। (Chap10, p74) वह 85K (मूल), 68K (केवल JSMin), 23K (केवल gzip) से 19K (JSMin + gzip) जाता है। यह लगभग 20% की वजह से बचाया गया है।
दीपक

1
इन दिनों ऐसे स्रोत मानचित्र भी हैं जो आपको मिनिफ़ाई करने के लिए चुनने पर दोनों दुनिया के सर्वश्रेष्ठ प्राप्त करने का प्रयास करने की अनुमति देते हैं।
जेटी

16

यह परीक्षण करते समय देखें: CSS के वे दो स्निपेट तुच्छ रूप से छोटे हैं, इसलिए वे GZIP संपीड़न से लाभ नहीं लेते हैं - GZIP के छोटे हेडर और फुटर (लगभग 20 बाइट्स ओवरहेड) के अतिरिक्त अकेले किए गए लाभ खो देंगे। वास्तव में आपके पास CSS फ़ाइल इस छोटी नहीं होगी और इसे संपीड़ित करने के बारे में चिंतित होना चाहिए।

minify + gzip सिर्फ gzip से ज्यादा कंप्रेस करता है

मूल प्रश्न का उत्तर है, हां, minify + gzip केवल gzip की तुलना में अधिक महत्वपूर्ण राशि प्राप्त करेगा। यह किसी भी गैर-तुच्छ उदाहरण के लिए सही है (यानी कोई भी उपयोगी जेएस या सीएसएस कोड जो कुछ सौ बाइट्स से अधिक है)।

प्रभाव में इसके उदाहरण के लिए, Jquery स्रोत कोड को पकड़ो जो कि उपलब्ध और असम्पीडित है, उन दोनों को gzip के साथ संपीड़ित करें और एक नज़र डालें।

यह ध्यान देने योग्य है कि जावास्क्रिप्ट अच्छी तरह से अनुकूलित सीएसएस की तुलना में खनन से बहुत अधिक लाभ उठाता है, लेकिन अभी भी एक लाभ है।

तर्क:

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

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

11

आप सही हे।

यह गज़िंग की तुलना में छोटा करने के लिए समान नहीं है (यदि ऐसा मामला था तो उन्हें वही कहा जाएगा)। उदाहरण के लिए, यह इसे gzip करने के लिए समान नहीं है:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

कुछ की तरह खत्म करने के लिए छोटा करें:

var a = null;

बेशक, मैं कह सकता हूँ कि ज्यादातर मामलों में यह सबसे अच्छा तरीका है, तो इसे केवल छोटा या तेज़ करने की तुलना में FIRST, Gzip को कम करने के लिए, हालाँकि कोड के आधार पर कभी-कभी सिर्फ minify या gzipping आपको दोनों करने की तुलना में बेहतर परिणाम देगा।


6

वहाँ एक सीमा है जिस पर gzip- एन्कोडिंग लाभप्रद है। सामान्य नियम यह है: फ़ाइल जितनी बड़ी होगी, उतना ही बेहतर संपीड़न और गज़िप हाथों से जीत जाएगा। बेशक आप पहले तो फिर बाद में gzip को छोटा कर सकते हैं।

लेकिन अगर हम gzip के बारे में बात कर रहे हैं, तो 100 ग्राम से अधिक लंबे टेक्स्ट के एक छोटे से टुकड़े पर छोटा करें, एक "उद्देश्य" की तुलना अविश्वसनीय नहीं है, यहां तक ​​कि व्यर्थ है - जब तक हम बेंचमार्किंग के एक मानक साधन की स्थापना के लिए आधारभूत पाठ के साथ नहीं आते हैं। लोरम इप्सम-प्रकार की तरह, लेकिन जावास्क्रिप्ट या सीएसएस में लिखा गया।

तो मुझे अपने Fat-Free Minify का उपयोग करके jQuery और MooTools (असम्पीडित संस्करण) के नवीनतम संस्करणों को बेंचमार्क करने का प्रस्ताव दें (PHP) कोड (बस व्हाट्सएप और टिप्पणियों से सादा स्ट्रिपिंग, चर की कोई कमी नहीं, कोई बेसएक्स-एन्कोडिंग नहीं)

यहाँ minify बनाम gzip के परिणाम हैं (रूढ़िवादी स्तर -5 संपीड़न पर) बनाम minify + gzip:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

इससे पहले कि कोई बंदूक से कूदे, यह जेएस पुस्तकालयों की लड़ाई नहीं है।

जैसा कि आप देख सकते हैं, माइनिंग + गज़िंग आपको बड़ी फ़ाइलों पर बेहतर संपीड़न देता है । न्यूनतम कोड के अपने फायदे हैं, लेकिन प्रमुख कारक यह है कि मूल कोड में व्हाट्सएप और टिप्पणियां कितनी हैं। इस मामले में, jQuery के पास अधिक है इसलिए यह बेहतर खनन (इनलाइन प्रलेखन में बहुत अधिक व्हाट्सएप) देता है। Gzip संपीड़न की ताकत सामग्री में कितना दोहराव है। तो यह मिनीज़ बनाम गज़िप के बारे में नहीं है। वे चीजों को अलग तरह से करते हैं। और आप दोनों का उपयोग करके दोनों दुनिया का सर्वश्रेष्ठ प्राप्त करते हैं।


5

दोनों का उपयोग क्यों नहीं?


1
कभी-कभी खनन करने के बाद उनमें से सिर्फ एक करने से भी ज्यादा खराब परिणाम प्राप्त होता है। वास्तव में, जैसा कि मैडवुल्फ ने परीक्षण किया था, सादे सीएसएस उदाहरण फ़ाइल को जिप करने से मूल से बड़ी फ़ाइल मिल जाएगी!
एसईबी

4
यह आमतौर पर फ़ाइल आकार पर निर्भर करता है। उत्पादन में आपके किसी भी CSS और JS फाइल को मिनिमाइजेशन और कम्प्रेशन से फायदा होगा। यदि आपके पास फ़ाइलों का भार है जो <1KB है, तो उन सभी को एक साथ मिलाएं और फिर छोटा करें और gzip ...
Min

1

यह परीक्षण करना आसान है: बस अपने सीएसएस के पाठ को पाठ फ़ाइलों में डालें और लिनक्स पर gzip जैसे एक अभिलेखागार का उपयोग करके फ़ाइलों को संपीड़ित करें।

मैंने अभी यह किया है, और ऐसा होता है कि पहली सीएसएस के लिए, आकार 184 बाइट्स और दूसरा एक 162 बाइट्स के लिए है।

तो, आप सही हैं, सफेद स्पेस मायने रखता है यहां तक ​​कि gzipped फ़ाइलों के लिए भी, लेकिन जैसा कि कोई भी इस छोटी सी परीक्षा से देख सकता है, वास्तव में छोटी फ़ाइलों के लिए, संपीड़ित फ़ाइल का आकार मूल फ़ाइल के आकार से अधिक हो सकता है।

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


उस मामले में ... मैं सादे सीएसएस फ़ाइलें पसंद करेंगे! वाह, उस छोटी सी जानकारी के लिए 184 बाइट्स ...
एसईबी

आप लिनक्स पर सिर्फ gzip <infile> आउटफाइल का उपयोग कर सकते हैं (या बेहतर अभी तक, gzip <inf wc था)। tar मेटाडेटा के बहुत सारे स्टोर करता है।
फ़िहग

1
7-ज़िप gzip के समान एल्गोरिथ्म नहीं है।
14

1

मैंने किसी को मैंगलिंग का उल्लेख करते नहीं देखा इसलिए मैं उस पर अपने परिणाम पोस्ट कर रहा हूं।

यहां कुछ आंकड़े दिए गए हैं, जिनमें मैं मिनिफिकेशन और Gzip के लिए UflifyJS का उपयोग कर रहा हूं। मेरे पास लगभग 20 फाइलें थीं, जिन्हें मैंने टिप्पणियों और सभी के साथ लगभग 2.5MB पर समेट लिया था।

कॉनैट फाइलें 2.5MB

uglify({
    mangle: false
})

बिना खाद के न्यूनतम: 929kb

uglify({
    mangle: true
})

न्यूनतम और मंगलकारी: 617kb

अब अगर मैं उन फाइलों को लेता हूं और उन्हें जिप करता हूं तो मुझे क्रमशः 239kb और 190kb मिलेंगे।


0

इसका परीक्षण करने का एक बहुत ही सरल तरीका है: केवल व्हॉट्सएप से युक्त एक फाइल बनाएं और दूसरी फाइल जो वास्तव में खाली हो। फिर Gzip दोनों और उनके आकार की तुलना करें। इसमें व्हाट्सएप वाली फाइल बेशक बड़ी होगी।


0

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

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

वैसे, CSS के लिए CSS कंप्रेसर जैसे उपकरण हैं जो आपके लिए नुकसानदेह काम करेंगे।

हालांकि, "हानिपूर्ण अनुकूलन" और दोषरहित संपीड़न के संयोजन के दौरान आपको सबसे अच्छे परिणाम मिलेंगे।


0

बेशक आप परीक्षण कर सकते हैं - अपनी फाइल में लिखें और इसे zlib के साथ gzip करें । आप "गज़िप" उपयोगिता कार्यक्रम के साथ भी प्रयास कर सकते हैं।

आपके प्रश्न पर वापस - स्रोत की लंबाई और संपीड़ित परिणाम के बीच कोई निश्चित संबंध नहीं है। मुख्य बिंदु 'एन्ट्रॉपी' है (स्रोत में प्रत्येक तत्व कितना अलग है)।

इसलिए, यह निर्भर करता है कि आपका स्रोत कैसा है। उदाहरण के लिए, बहुत से कंटीन्यूअस स्पेस (उदा।,> 1000) को कुछ (पूर्व, <10) जगहों के समान आकार में संकुचित किया जा सकता है।


0

यह परिणाम है जब दो फ़ाइलों को gziping

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

2
@ कामदेव, यह केवल मामला है जब फाइलें इतनी छोटी और तुच्छ होती हैं कि GZIP फ़ाइल हेडर के अतिरिक्त वास्तव में अंतरिक्ष की बचत की तुलना में अधिक अंतर करता है। कोई भी इस छोटे से व्यवहार में CSS फ़ाइल का उपयोग नहीं करेगा, या यदि वे करते हैं, तो इसे संपीड़ित करना उनकी पहली चिंता नहीं होनी चाहिए। किसी भी दर पर, यह अभी भी दिखाता है कि केवल gzipping की तुलना में minifying + gzipping अधिक कुशल है, जो निश्चित रूप से सच है।
थोमसट्रेटर

-1

आप सही हैं, कम बाइट में + गज़िप परिणाम घटाएँ। हालांकि कोई वैज्ञानिक प्रमाण नहीं।

आपके पास परीक्षण का कोई तरीका नहीं है?

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.