वेबपैक 2 के साथ पेड़ हिलाकर काम कर रहा है या नहीं, इसकी पुष्टि कैसे करें?

Question

मैंने अपने प्रतिक्रिया ऐप को वेबपैक 1 से वेबपैक 2 में अपडेट करना समाप्त कर दिया है। हालांकि, मेरा बंडल आकार ~ 30 केबी तक बढ़ गया है। मैं उम्मीद कर रहा था कि बंडल का आकार घट जाएगा, मैं कैसे पुष्टि कर सकता हूं कि पेड़ हिलाकर काम किया। और क्यों वृद्धि?

Answer 1

ले जा सकते हैं कुछ ही कदम नहीं है:

1. बारी बंद minification/कार्य जो आप जानते हैं अप्रयुक्त
2. जांच उत्पादन करता है, तो उन टिप्पणियों को देखने के लिए में से कुछ में बदसूरत करना
3. डालने टिप्पणी वहाँ या

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

आप इस से देखने के लिए जहां आकार में वृद्धि से आ रही है सक्षम होना चाहिए।

Answer 2

टीएल; डीआर: संस्करण 2.3 के अनुसार, वेबपैक में कोई पेड़ हिलाने वाला नहीं है। यह अप्रयुक्त कोड को हटाने के लिए केवल UglifyJS का उपयोग करता है।

---

सबसे पहले हमें पेड़ को हिलाकर परिभाषित करना होगा।

• Stackoverflow "आधुनिक जावास्क्रिप्ट के लिए मृत कोड उन्मूलन एल्गोरिथ्म" यह परिभाषित करता है।

• वेबपैक स्पष्ट करता है कि यह अपने मॉड्यूल सिस्टम की स्थिर संरचना के लिए ES2015 मॉड्यूल आयात/निर्यात पर निर्भर करता है।

• रोलअप (जो मूल रूप से शब्द को लोकप्रिय करता है) में भी एक समान स्पष्टीकरण है।

तो हम एक विशिष्ट परिभाषा को कम कर सकते हैं: अप्रयुक्त ईएस मॉड्यूल निर्यात का स्थिर बहिष्कार।

• कोलाहल-लोडर एक प्रवेश बिंदु जो कुछ मॉड्यूल प्रारूप में एक जावास्क्रिप्ट फ़ाइल है तंग आ गया है:

  अब, चलो देखते हैं जो परिवर्तन के चरणों प्रत्येक मॉड्यूल आमतौर पर है करते हैं। कोलाहल अन्य मॉड्यूल प्रारूप करने के लिए यह बदल सकता है या तो इसे छोड़ के (module: false)

• webpack स्थिर फ़ाइल को पार्स और आयातित मॉड्यूल मिलेगा (regexp किसी प्रकार का उपयोग करते हुए)
• webpack या तो मॉड्यूल प्रारूप बदल सकते हैं (यदि कोलाहल है के रूप में यह पहले से ही tranform नहीं करता है) या कुछ रैपर (commonjs मॉड्यूल के लिए जोड़ें)
• आयातित मॉड्यूल एक प्रवेश बिंदु बन जाता है और बाद में सभी मॉड्यूल लोड किए गए हैं और बदल कोलाहल-लोडर को
• चला जाता है, कुरूप बनाना परिणाम bunle पर कार्रवाई करेंगे और निकालें अप्रयुक्त कोड (unused: true)

अब, हम देख सकते हैं कि uglify अप्रयुक्त निर्यात को हटा सकता है, यह वास्तव में ES मॉड्यूल सिंटैक्स पर भरोसा नहीं करता है।यह सिर्फ एक सामान्य उद्देश्य मृत कोड उन्मूलन है, इसलिए इसे "वृक्ष हिलाने" के रूप में परिभाषित नहीं किया जा सकता है।

तो हम कैसे पुष्टि कर सकते हैं कि वेबपैक पेड़ हिल रहा है या नहीं?

• सबसे पहले, सभी कोड ईएस मॉड्यूल प्रारूप में होना चाहिए।
• जैसा कि पहले से ही किसी अन्य उत्तर में उल्लेख किया गया है, हमें उलझाना अक्षम करना होगा।
• हमें भी बेबेल के मॉड्यूल रूपांतरण को अक्षम करना होगा क्योंकि हम नहीं जानते कि उस चरण में एक मॉड्यूल का उपयोग किया जाता है या नहीं।

और अब अगर webpack वास्तव में एक पेड़ एल्गोरिथ्म मिलाते हुए लागू करता है कि हम इसे इस प्रविष्टि बिंदु के बंडल आकार को देखकर इस बात की पुष्टि कर सकते हैं:

import { keyBy } from 'lodash-es'; // lodash is in ES module format 

console.log(keyBy([{ key: 'value' }], 'key')); 

webpack परिणाम झटकों के दसियों होना चाहिए पेड़ है तो किलोबाइट। यदि यह नहीं आधा मेगाबाइट या अधिक होगा।