कोड का आकार मिनिफायर, कलेक्टर और भाषा पर कैसे निर्भर करता है। अनपेक्षित वेबपैक अद्यतन

मेरा नाम इल्या गोल्डफार्ब है, मैं यैंडेक्स इंटरफेस का डेवलपर हूं। मैं यह जानने में रुचि रखता हूं कि सीमांत निर्माण के उपकरण कैसे विकसित हो रहे हैं, इसलिए मैं लोकप्रिय समाधानों के प्रत्येक रिलीज में होने वाले परिवर्तनों का अध्ययन करने की कोशिश करता हूं।

वेबपैक के पांचवें संस्करण की प्रत्याशा में, मैं 19 नवंबर, 2018 को इसके प्रतीत होने वाली मामूली रिलीज 4.26.0 के बारे में बात करना चाहता हूं, जहां अप्रत्याशित रूप से और युद्ध की घोषणा किए बिना, मिनीफ़ायर के डिफ़ॉल्ट संस्करण को बदल दिया गया था। यह एक UglifyJS पैकेज हुआ करता था, अब यह Terser, UglifyJS की एक शाखा, UglifyJS की एक शाखा का उपयोग करता है, जो ES5 और ES6 कोड दोनों को संपीड़ित कर सकता है। Terser तब दिखाई दिया जब मुख्य अनुरक्षक ने UglifyES का समर्थन और विकास करने से इनकार कर दिया। हालांकि, UglifyJS ने भी अगस्त 2018 में अपने विकास को रोक दिया था, जब आखिरी रिलीज हुई थी। एक नए कांटे में, हमने कुछ बग्स को ठीक किया और कोड को थोड़ा रिफैक्ट किया।

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

इस पूरी कहानी ने मुझे संपीड़न पर थोड़ा व्यक्तिगत शोध करने के लिए प्रेरित किया। यहां मेरे द्वारा पूछे गए प्रश्न हैं:

• ES5, TerSer या UglifyJS को क्या बेहतर बनाता है?
• क्या तेजी से लोड हो रहा है: Terser से या UglifyJS से ES5 का एक संपीड़ित संस्करण?
• किस संस्करण का वजन अधिक है: ES5 या ES6? और टाइपस्क्रिप्ट इसे कैसे प्रभावित करता है?
• क्या डिफ़ॉल्ट सेटिंग्स और मैन्युअल सेटिंग्स के बीच एक बड़ा अंतर है?
• और अगर नहीं वेबपैक? एक छोटी सभा, रोलअप या वेबपैक का निर्माण कौन करता है?

अनुसंधान के लिए, मैंने एक छोटा रिएक्ट 16 एप्लिकेशन बनाया जो Vue 2 एप्लिकेशन को प्रस्तुत करता है जो एक कोणीय 7 अनुप्रयोग प्रदान करता है जिसमें एक पूरा बटन होता है।

कुल में, गैर-छोटे कोड (720 393 gzip बाइट्स) के 3 529 695 बाइट जारी किए गए थे।

ES5, TerSer या UglifyJS को क्या बेहतर बनाता है?

मैंने अंतिम उपलब्ध UglifyJS लिया और ES5 विकल्प के साथ टसर वेबपैक के साथ आ रहा था और उसी संपीड़न सेटिंग्स का उपयोग किया।

	बाइट्स में आकार	बाइट्स में आकार (gzip)
UglifyJS	1050376	285,290
terser	1089282	२ ९ २ ६2 6

नीचे पंक्ति: UglifyJS 3.5% (2.5% gzip) द्वारा बेहतर संपीड़ित करता है।

क्या तेजी से लोड हो रहा है: Terser से या UglifyJS से ES5 का एक संपीड़ित संस्करण?

मैंने मानक DevTools Yandex ब्राउज़र का उपयोग करके प्रदर्शन को मापा। मैंने पृष्ठ को 12 बार लोड किया और पहले तीन आयामों को त्यागते हुए स्क्रिप्टिंग (स्क्रिप्ट का रनटाइम) मान लिया।
UglifyJS - 221 एमएस (त्रुटि 2.8%)।
टसर - 226 एमएस (त्रुटि 2.7%)।
निचला रेखा: ऐसी त्रुटि के लिए मान बहुत कम हैं, हम उन पर विचार कर सकते हैं। हम यह भी निष्कर्ष निकालते हैं कि यह विधि लोड समय को मापने के लिए उपयुक्त नहीं है।
मैंने कोड की गति को मापा और तुलना नहीं की, क्योंकि विभिन्न कोड अलग-अलग काम करते हैं। प्रत्येक परियोजना के डेवलपर्स को स्वतंत्र रूप से इस मुद्दे की जांच करनी चाहिए।

किस संस्करण का वजन अधिक है: ES6 या ES5? और टाइपस्क्रिप्ट इसे कैसे प्रभावित करता है?

दो संस्करणों की तुलना करने और पूरी तरह से प्रौद्योगिकी पर ध्यान केंद्रित करने के लिए, मैंने बैबल प्लगइन्स लिया और चार असेंबली बनाईं:

• ES5: es2016 के रूप में चिह्नित सभी प्लगइन्स, बाद के संस्करणों के लिए object.assign + प्लगइन्स के लिए + प्लगइन + प्रायोगिक प्लगइन्स, tsconfig में लक्ष्य ES5 में स्थापित है;
• ES5 (ts esnext): es2016 के रूप में चिह्नित सभी प्लगइन्स, ऑब्जेक्ट के लिए + प्लगइन। बाद के संस्करणों के लिए सभी प्लगइन्स + प्रयोगात्मक प्लगइन्स, tsconfig में लक्ष्य esnext पर सेट है;
• ES6: es2017 के लिए केवल प्लग-इन और बाद में + प्रयोगात्मक प्लग-इन, tsconfig में लक्ष्य ES6 पर सेट है;
• ES6 (ts esnext): es2017 के लिए केवल प्लगइन्स और बाद में + प्रायोगिक प्लगइन्स, tsconfig में लक्ष्य esnext पर सेट है।

	बाइट्स में आकार	बाइट्स में आकार (gzip)
ES5	१ १ 1६ ५२०	322 071
ES5 (ts esnext)	1089282	२ ९ २ ६2 6
ES6	1087220	292 232 है
ES6 (ts esnext)	1087220	292 232 है

नीचे पंक्ति: एस्केक्स्ट के तहत संकलन टाइमपास के साथ बेबल द्वारा संकुचित संस्करण 97,238 बाइट्स (8.2%) कम है। यह अप्रत्याशित रूप से बहुत कुछ हुआ, क्योंकि कोणीय टाइपस्क्रिप्ट में कोणीय लिखा हुआ है, और Uglify की तरह जावास्क्रिप्ट टर्सर में Vue और रिएक्ट , वेबपैक के साथ निर्माण करते समय कोणीय से वितरित अनुपयोगी कोड को वेब स्क्रिप्ट के साथ संकलित नहीं कर सकता है। यह इस उदाहरण के लिए एक संकलन बग है। किसी अन्य प्रोजेक्ट पर असेंबली में, यह नहीं हो सकता है, और अंतर बहुत छोटा होगा।

यह भी देखा गया है कि ES6 कोड की मात्रा केवल 2062 बाइट्स से ES5 से कम है। पालतू परियोजना पर, मुझे पूरी तरह से अलग परिणाम मिला: ES6 कोड ES5 से 3-6% अधिक है। यह कई कारकों के कारण है, जिनमें से दो मुख्य हैं:
1. क्लास इनहेरिटेंस के लिए बैबेल हेल्पर को एक बार डाला जाता है और फिर चार बाइट्स (e (a, b)) का खर्च होता है, और ES6 15 बाइट्स (क्लास एक एक्सटेंडेड b) की कीमत पर देशी इनहेरिटेंस का उपयोग करता है।
2. चर घोषित करने की विधि। ES5 में, ये var हैं, और ये पूरी तरह से कंप्रेस करते हैं। लेकिन ES6 में ये लेट और कास्ट हैं, जो इनिशियलाइज़ेशन ऑर्डर को संरक्षित करते हैं और एक दूसरे के साथ संयुक्त नहीं होते हैं।

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

इसलिए, प्रश्न का उत्तर देना असंभव है: परिणाम कोड और लक्ष्य रनटाइम पर अत्यधिक निर्भर है।

क्या डिफ़ॉल्ट सेटिंग्स और मैन्युअल सेटिंग्स के बीच एक बड़ा अंतर है?

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

	बाइट्स में आकार	बाइट्स में आकार (gzip)
Terser (डिफ़ॉल्ट) ES5	1097141	294 306
Terser (5 पास) ES5	१ ० 1 ९ ३१२	292,408
Uglify (डिफ़ॉल्ट) ES5	1 091 350	294,845
Uglify (5 पास) ES5	1050363	284 618 है

नीचे पंक्ति: पाँच गुना minification के साथ Uglify, Uglify से डिफ़ॉल्ट रूप से 3.7% (3.4% gzip) से कम है। इसलिए, आपको हमेशा संपीड़न सेटिंग्स को कसना चाहिए। वैसे, पांच गुना खनन का मतलब यह नहीं है कि विधानसभा पांच गुना लंबी हो जाएगी। उदाहरण के लिए, इस परीक्षण परियोजना में, एक एकल संशोधन में 18 सेकंड, पांच बार - 38 और दस बार - 49 का समय लगता है। मैं प्रयोगात्मक रूप से आपकी परियोजना के लिए आदर्श मूल्य खोजने की सलाह देता हूं, जिसके बाद यह संशोधन बंद हो जाएगा और कोड नहीं बदलेगा। आमतौर पर यह 5 से 10 तक होता है। अन्य विकल्पों का एक समूह भी होता है: टिप्पणियां: लाइसेंस के बारे में सभी टिप्पणियों को गलत तरीके से काटता है (हालांकि यह एक कानूनी मुद्दा है), और hoist_funs: सच्चे समूह एक ही स्थान पर कार्य करते हैं, जो कि var के बेहतर अनुकूलन की अनुमति देता है। आदर्श रूप से, आपको सभी सेटिंग्स पर जाने की आवश्यकता है।

एक छोटी सभा, रोलअप या वेबपैक का निर्माण कौन करता है?

रोलअप एक वैकल्पिक कलेक्टर है जिसमें बिल्ट-इन ट्री शेकिंग मैकेनिज्म है। परीक्षण के लिए, मैंने वेबपैक की समान सेटिंग्स के साथ रोलअप 0.67.4 पर एक निर्माण किया।

	बाइट्स में आकार	बाइट्स में आकार (gzip)
रोलअप ES5 (Uglify)	990 497	274 105
रोलअप ES5 (Terser)	995 318	272 532
वेबपैक ES5 (Uglify)	1050363	284 618 है
वेबपैक ES5 (Terser)	१ ० 1 ९ ३१२	292,408

नीचे पंक्ति: रोलअप और Uglify से परिणाम 5.6% (3.6% gzip) कम है।

यह कई कारणों से हुआ:

1. वेबपैक में बॉर्डरलाइन मामलों के लिए बैसाखी होती है। उदाहरण के लिए, यह कोड ऑब्जेक्ट () में किसी अन्य मॉड्यूल से प्रत्येक फ़ंक्शन कॉल को लपेटता है। ऐसा मॉड्यूल के लिए संदर्भ हस्तांतरण को रोकने के लिए किया जाता है ताकि उपयोग सख्त के साथ मॉड्यूल के लिए सख्त न हो। तृतीय-पक्ष निर्भरता के बिना अच्छी तरह से लिखित परियोजनाओं को एक आवरण की आवश्यकता नहीं होती है, लेकिन कभी-कभी विधानसभा में केवल अच्छी तरह से लिखित कोड शामिल नहीं होता है। और इस संबंध में, वेबपैक अधिक विश्वसनीय दिखता है। रोलैप, बदले में, मानता है कि सभी मॉड्यूल ES6 मॉड्यूल हैं, और वे हमेशा सख्त उपयोग में निष्पादित होते हैं, इसलिए यह समस्या उसके लिए मौजूद नहीं है।

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

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

अध्ययन सारांश

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

सबसे पहले, टाइपस्क्रिप्ट और बैबेल का एक गुच्छा सही ढंग से सेट करें। विधानसभा के प्रत्येक घटक को अपनी बात करने दें: एक प्रकार की जाँच करता है, और दूसरा अप्रचलित मानकों को परिवर्तित करने के लिए जिम्मेदार है।

दूसरे, ES5 का उपयोग करते समय, आप मिनिफ़ायर को UglifyJS में बदल सकते हैं, लेकिन याद रखें कि यह अब समर्थित नहीं है।

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