🎮 🔣 🔀 जावास्क्रिप्ट पेड़ हिल, एक समर्थक की तरह 🍈 🍻 ☀️

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

Trichashing मुख्य तकनीक बन जाती है जब आपको बंडल के आकार को कम करने और JS पर अनुप्रयोग प्रदर्शन में सुधार करने की आवश्यकता होती है।

कैसे काम करता है:

आप प्रत्येक मॉड्यूल में आयात और निर्यात की घोषणा करते हैं।
कलेक्टर (वेबपैक, रोलअप या अन्य) विधानसभा के दौरान निर्भरता के पेड़ का विश्लेषण करता है।
अप्रयुक्त कोड को अंतिम बंडल से बाहर रखा गया है।

उपयोगिता फ़ाइल दो कार्यों को निर्यात करती है,

लेकिन केवल initializeName का उपयोग किया जाता है, formatName को हटाया जा सकता है।

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

कहाँ से शुरू करें?

ट्रिशिंग स्थापित करने के लिए भारी संख्या में दिशानिर्देश हैं। आधिकारिक वेबपैक प्रलेखन के साथ विषय में डाइविंग शुरू करना बेहतर है ।

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

इस लेख में वेबपैक, बैबल और टसर के साथ काम करने पर चर्चा की गई है। हालांकि, प्रस्तुत किए गए अधिकांश सिद्धांत काम करेंगे चाहे आप वेबपैक, रोलअप, या कुछ और का उपयोग करें।

आयात और निर्यात के लिए ES6 सिंटैक्स का उपयोग करें

ES6 आयात और निर्यात का उपयोग करना trichashing काम करने के लिए पहला और सबसे महत्वपूर्ण कदम है।

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

विकल्प जो आम का उपयोग करते समय संभव हो।

ES6 मॉड्यूल का उपयोग करते समय, आयात और निर्यात विकल्प अधिक सीमित हैं:

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

ES6 मॉड्यूल में सरल शब्दार्थ और उपयोग के नियम हैं।

सरलीकृत नियम कोडांतरकों को ठीक से समझने की अनुमति देते हैं कि आयात और निर्यात किया गया था, और परिणामस्वरूप, यह निर्धारित करें कि किस कोड का उपयोग नहीं किया गया है।

बाबेल को आयात और निर्यात को स्थानांतरित करने की अनुमति न दें

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

सौभाग्य से, बैबल कॉन्फिगरेशन में मॉड्यूल ट्रांसप्लिमेंटेशन को अक्षम करने का एक आसान तरीका है ।

आपके द्वारा ऐसा किए जाने के बाद, कलेक्टर आयात और निर्यात के लेन-देन में सक्षम हो जाएगा।

अपने निर्यात को परमाणु बनाओ

वेबपैक आमतौर पर निम्नलिखित मामलों में निर्यात को छोड़ देता है:

;
;
.

इस तरह के निर्यात या तो पूरी तरह से बंडल में शामिल होंगे, या पूरी तरह से हटा दिए जाएंगे। तो, अंत में, आप एक बंडल युक्त कोड के साथ समाप्त हो सकते हैं जो कभी भी उपयोग नहीं किया जाएगा।

दोनों कार्यों को बंडल में शामिल किया जाएगा, भले ही केवल एक का उपयोग किया जाए।

और यहां वर्ग पूरी तरह से विधानसभा में जोड़ा जाएगा।

अपने निर्यात को यथासंभव छोटा और सरल रखने की कोशिश करें।

केवल उस फ़ंक्शन का उपयोग किया जाएगा जो अंतिम बंडल में मिलेगा।

इस सलाह के बाद कलेक्टर इस तथ्य के कारण अधिक कोड को बाहर करने की अनुमति देता है कि अब विधानसभा प्रक्रिया के दौरान आप ट्रैक कर सकते हैं कि कौन सा फ़ंक्शन आयात और उपयोग किया गया था और कौन सा नहीं था।

यह टिप एक अधिक कार्यात्मक और पुन: प्रयोज्य शैली में कोड लिखने में मदद करता है, और उन कक्षाओं का उपयोग करने से बचने के लिए जहां यह उचित नहीं है।

यदि आप कार्यात्मक प्रोग्रामिंग में रुचि रखते हैं, तो इस लेख को देखें ।

मॉड्यूल स्तर पर दुष्प्रभावों से बचें

मॉड्यूल लिखते समय, कई लोग एक महत्वपूर्ण, लेकिन बहुत ही कपटपूर्ण कारक याद करते हैं - साइड इफेक्ट्स का प्रभाव।

Webpack समझ में नहीं आता कि window.memoize क्या करता है, और इसलिए इस फ़ंक्शन को फेंक नहीं सकता है।

ध्यान दें ऊपर दिए गए उदाहरण window.memoizeको मॉड्यूल के आयात के समय कहा जाएगा।

जैसा कि वेबपैक इसे देखता है:

ठीक है, एक शुद्ध ऐड फंक्शन बनाया और निर्यात किया जाता है - शायद मैं इसे हटा सकता हूं अगर बाद में इसका उपयोग नहीं किया जाएगा;
फिर window.memoize को कहा जाता है, जिसमें ऐड जोड़ा जाता है;
मुझे नहीं पता कि वह क्या कर रही है window.memoize, लेकिन मुझे पता है कि वह शायद ऐड को कॉल करेगी और साइड इफेक्ट बनाएगी।
इसलिए सुरक्षा के लिए मैं बंडल में ऐड फंक्शन नहीं छोड़ूंगा, भले ही कोई और इसका इस्तेमाल न करे ।

वास्तव में, हमें यकीन है कि यह window.memoizeएक शुद्ध कार्य है जो कोई साइड इफेक्ट नहीं बनाता है और यदि कोई इसका उपयोग करता है तो कॉल एड करता है memoizedAdd।

लेकिन वेबपैक को यह पता नहीं है और शांति के लिए, अंतिम बंडल में ऐड फंक्शन जोड़ता है।

ईमानदार होना: साइड इफेक्ट्स का पता लगाने में वेबपैक और टसर के नवीनतम संस्करण असामान्य रूप से अच्छे हैं।

हम वेबपैक को अधिक जानकारी देते हैं और एक अनुकूलित बंडल प्राप्त करते हैं।

अब कलेक्टर के पास विश्लेषण के लिए पर्याप्त जानकारी है:

memoizeमॉड्यूल स्तर पर यहां कहा जाता है, यह समस्याओं से भरा जा सकता है;
लेकिन फ़ंक्शन memoizeES6 आयात से आया है, आपको फ़ंक्शन को देखने की आवश्यकता है util.js;
वास्तव में, मेमोइज़ एक शुद्ध कार्य की तरह दिखता है, इसके कोई दुष्प्रभाव नहीं हैं;
यदि कोई फ़ंक्शन का उपयोग नहीं करता है add, तो हम इसे अंतिम बंडल से सुरक्षित रूप से बाहर कर सकते हैं।

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

संभावित ट्रिशकिंग मुद्दों की पहचान करने के लिए उपकरणों का उपयोग करें

मुझे समस्याओं की पहचान करने के लिए दो उपकरण मिले।

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

दूसरा लिंटर https://www.npmjs.com/package/eslint-plugin-tree-shaking के लिए प्लगइन है । मैंने इसे अभी तक अपने बॉयलरप्लेट में एकीकृत नहीं किया है, क्योंकि जब मैंने इसके साथ प्रयोग किया तो यह प्रवाह का समर्थन नहीं करता था। हालांकि, उन्होंने बहुत अच्छी तरह से ट्राइकशिंग के साथ समस्याओं की पहचान की।

पुस्तकालयों से सावधान रहें

ट्राईशिंग के लिए अनुकूलित पुस्तकालयों का उपयोग करने का प्रयास करें। यदि आप कम से कम कोड का एक बड़ा बंडल आयात करते हैं, उदाहरण के लिए jquery.min.js, ऐसी संभावना है कि यह मॉड्यूल अनुकूलित नहीं होगा। एक मॉड्यूल की तलाश करना बेहतर है जिसमें से परमाणु कार्यों को आयात किया जा सकता है, और विधानसभा और लघुकरण के लिए वेबपैक या रोलअप का उपयोग करें।

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

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

झंडे का उपयोग करें

वेबपैक के लिए डेफिनप्लगिन प्लगइन में एक अद्भुत, लेकिन सबसे प्रसिद्ध विशेषता नहीं है - निर्माण प्रक्रिया के दौरान किस कोड को बाहर करने की क्षमता को प्रभावित करने की क्षमता है।

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

विधानसभा शुरू करो

यह निर्धारित करना बहुत मुश्किल है कि वेबपैक किसी विशेष मॉड्यूल को कैसे अनुकूलित करेगा।

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

कुछ और?

यदि आप अन्य उपयोगी टिप्स जानते हैं, तो कृपया टिप्पणियों में इस बारे में लिखें।

जावास्क्रिप्ट पेड़ हिल, एक समर्थक की तरह