तोड़ना - निर्माण नहीं। या विचलन

हाल ही में, Habré पर कुछ दिलचस्प लेख दिखाई दिए। पहला ES6 minification समस्या के लिए समर्पित था, दूसरा सामान्य उपयोगी वेबपैक ऑप्टिमाइज़ेशन टिप्स के बारे में ।

सबकुछ ठीक हो जाएगा, लेकिन वे दोनों minification और अन्य अनुकूलन प्रयोजनों के लिए ES6 और ES5 में बंडलों के बंटवारे के मुद्दे को दरकिनार कर दिया। और सामान्य तौर पर, जबकि कुछ इसके बारे में लेख लिखते और लिखते हैं , अन्य (लगभग सभी) इस तकनीक को अनदेखा करते हैं।

क्योंकि लंबे समय से। बहुत ज़्यादा। और ऐसा बहुत नहीं है।

लेकिन यह जल्दी, सस्ते, और डम्बर के लिए आवश्यक है। शायद आपको सिर्फ उल्टा विकास करना चाहिए।

विचार

"विचार" का वर्णन करना अच्छा विचार नहीं है। यह वर्णन करना बेहतर है कि यह कैसे काम करना चाहिए। बंडल निर्माण प्रक्रिया कैसे काम करनी चाहिए:

• मेरे पास एक कोड है
• मैं इसे अपने "विकास" ब्राउज़र के तहत संकलित करता हूं
• और यह सब काम करता है।

विकास ब्राउज़र यहाँ है - ताकि async / प्रतीक्षा, जनरेटर, कक्षाएं, तीर फ़ंक्शंस और इतने पर। सामान्य तौर पर, लक्ष्य: कोलाहल में esmodules ।

मैं आपके बारे में नहीं जानता, लेकिन मुझे यह विचार पसंद है। यहां अभी पुराने ब्राउज़र हैं जो अभी भी हमारे बीच हैं, यह विचार उस तरह से फिट नहीं है। (और इसलिए हम सभी उत्पादन में es5 hiss करते हैं, पॉलीफ़िल के आधे मेगाबाइट के साथ मसाला)

और ठीक वैसा ही होना चाहिए।

हस्तांतरण

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

संक्षेप में, तब:

• सभी js स्क्रिप्ट हैं
• एक सक्रिय प्लगइन (कांटा useBuiltins: "उपयोग") के साथ बेबल के माध्यम से चलाएं जो आवश्यक पॉलीफ़ाइल्स को परिभाषित करता है। यह तेज़ है, क्योंकि कोई परिवर्तन नहीं हैं।
• प्रत्येक फ़ाइल के लिए, उसकी ज़रूरत की सभी पॉलीफ़ाइल्स एकत्र की जाती हैं (शून्य से जो पहले से ही मुख्य बंडल में होती हैं), मर्ज की जाती हैं, टसर के माध्यम से चलती हैं और फ़ाइल के शीर्ष पर जोड़ी जाती हैं।
• प्रत्येक फ़ाइल swc के माध्यम से चलाई जाएगी, बाबेल का एक रस्ट संस्करण, जो IE11 को समझने वाले कोड को डी-अपग्रेड करता है। कोलाहल की तुलना में 10-60 गुना तेज काम करता है। यह विभिन्न प्लगइन्स का समर्थन नहीं करता है, लेकिन यह आवश्यक नहीं है - यह सब आवश्यक है __ पहले से ही लागू है।
• terser को एक बार फिर से परिणाम पर सुपरइम्पोज़ किया गया है, लेकिन मैनल ऑफ (नाम संपीड़न) के साथ, जो फिर से तेज़ है।
• यह सब श्रमिकों में किया जाता है।

मैंने विभिन्न कठिनाई स्तरों की तीन परियोजनाओं पर कोड चलाया:

• प्रोजेक्ट 1, 60 अंतिम जेएस फाइलें (कोड-विभाजन)। 400 का समय बनाएँ। विचलन 30 s।
• प्रोजेक्ट 2, 1 अंतिम js फ़ाइल (30mb)। 120 का समय बनाएँ। विचलन 10 s।
• प्रोजेक्ट 3, 1 अंतिम js फ़ाइल (2mb)। समय 20s बनाएँ। विचलन 5 एस (श्रमिकों की शुरुआत में बहुत सारी चीजें खो जाती हैं)।

ईएसएम बंडल से बोनस थोड़ा अजीब था:

• एक परियोजना ने 400kb बेबल / पॉलीफिल खो दिया। कुछ भी नहीं "ओवर" ब्राउज़र चिप्स वहाँ ट्राइट के लिए इस्तेमाल किया गया था, और "एसएसएम" में उन्हें पॉलिश करने की आवश्यकता नहीं है
• जेनरेटर, एसिंक्स / वेट और क्लास कंस्ट्रक्टर्स के बहुत अधिक कॉम्पैक्ट कोड के कारण एक परियोजना में 10% का नुकसान हुआ
• एक परियोजना ने चापलूसी बढ़ा दी है, क्योंकि "ढीले" बेबल रूपांतरण कभी-कभी कोड को अधिक कॉम्पैक्ट बनाते हैं। लेकिन ढीला मोड थोड़ा खतरनाक विकल्प है, जबकि "ES6" कोड "सुरक्षित" है।

एक बार फिर:

• हम ES6 कोड लेते हैं (अधिक सटीक रूप से esmodule, let / const को गति उद्देश्यों के लिए var के साथ बदल दिया जाएगा)
• इसे ES5 बनाते हैं
• पॉलीफिल्स के किनारे फेंक दें
• डैडीज़ पर तितर बितर करना, अन्य फ़ाइलों में सीमलिंक जोड़ना
• हम स्क्रिप्ट के पृष्ठों को थोड़ा होशियार (IE11 मॉड्यूल / नामांकन को समझ में नहीं) से जोड़ते हैं
• किया - कस्टम मीटर के 85% के लिए ईएसएम, टैंक में उन लोगों के लिए ES5।

बस। जल्दी। बस बेवकूफ है। हमने बंडल को डी-अपग्रेड किया। पुराने ब्राउज़र! औ - परोसा गया।

खैर, नए ब्राउज़रों को लगभग कोई पॉलीफ़िल के साथ एक बंडल प्राप्त होगा, बिना जनरेटर और async / प्रतीक्षा के भयानक परिवर्तनों के बिना, तीर के कार्यों के बिना tambourines (और वे आम तौर पर तेज़ हैं)। सामान्य तौर पर, हर कोई खुश है, ऐसा लगता है कि यह मूल रूप से इरादा था।

github.com/thekashey/devolution

पुनश्च: वास्तव में, इस समय, विचलन का उपयोग swc में नहीं होता है , क्योंकि यह कभी-कभी कोड को बहुत काम नहीं करता है - github.com/swc-project/swc/issues/280 , Babel इतना धीमा नहीं है - जहाँ swc सही किया गया था 20 सेकंड में, बैबिल एक मिनट में कर सकता है। "सामान्य" बिल्ड टाइम के साथ - 5 बाद से - यह एक बड़ा प्लस है

पुनश्च: यदि अचानक यह दिलचस्प हो गया क्यों विचलन - वीडियो यहाँ है ।