क्लाउड नेटिव इंटरएक्टिव लैंडस्केप एक ओपन-सोर्स, ब्राउज़र-ओनली एप्लिकेशन है जो क्लाउड नेटिव इकोसिस्टम की कल्पना के लिए एक स्टैटिक रिएक्ट ऐप लोड करता है:
आप webpack-bundle-analyzer के परिणाम अंतःक्रियात्मक रूप से देख सकते हैं और यहां एक स्नैपशॉट है:
मुझे समझ में नहीं आता कि @material-ui/core/es, node_modules और src दोनों में क्यों दिखाई देता है। अधिक आम तौर पर, मैं यह समझने की कोशिश कर रहा हूं कि क्या हमारे ट्री-शेकिंग को बेहतर तरीके से लागू किया गया है, या यदि इसे कॉन्फ़िगर करने का कोई बेहतर तरीका है। अगर हम बेहतर रूप से पेड़ को हिलाने वाले लॉश हैं तो मैं सुनने की भी सराहना करूंगा। (ध्यान दें कि हम केवल सदाबहार ब्राउज़रों को लक्षित कर रहे हैं।)
कृपया बेझिझक repo फोर्क करें और webpack.config.prod.js। यदि आप एक पुल अनुरोध खोलते हैं, तो Netlify एक परीक्षण सर्वर का निर्माण और परिनियोजन करेगा और आप test-server-url/report.html के अंतर्गत परिणामों की जांच कर सकते हैं।
1 उत्तर
तो मैं प्रस्तावना करना चाहता हूं कि es नाम खराब तरीके से चुना गया था। src अधिक उपयुक्त होगा क्योंकि यह बस यही है: अप्रतिबंधित स्रोत कोड। यह न्यूनतम बंडल आकार के तहत दस्तावेज़ में प्रलेखित है
वेबपैक 4 और उचित module प्रविष्टियों के साथ संबंधित package.json में आपको उन पैकेजों के एस्मॉड्यूल संस्करण को स्वचालित रूप से खींचना चाहिए। एस्मॉड्यूल संस्करण वेबपैक में अधिकांश ट्री-शेकिंग ऑप्टिमाइज़ेशन के लिए ज़िम्मेदार है।
@material-ui/core में पहले से ही उचित प्रविष्टि है। हालांकि यह केवल शीर्ष स्तर पर एक एस्मॉड्यूल संस्करण है। वास्तविक घटकों को तब कॉमनजेएस के साथ लिखा जाता है जो वेबपैक में ट्री-शेकिंग की अनुमति नहीं देता है। हमारे पास एक खुला PR है, लेकिन हम अगले मेजर का इंतजार कर सकते हैं हम संकलित फ़ाइलों पर परीक्षण नहीं करते हैं जो निर्माण को डरावना बनाता है।
यह एक संयोजित मॉड्यूल के रूप में क्यों दिखाई देता है, मैं इसमें आपकी सहायता नहीं कर सकता। जांच करते समय मैंने वही अवलोकन किया (https://github.com/eps1lon/material-ui- पेड़ हिलाना)। यह शायद बंडल-विश्लेषक के साथ एक समस्या है और उत्पन्न भाग पर इसका कोई वास्तविक प्रभाव नहीं है (उदाहरण के लिए https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188)।
कुल मिलाकर मेरा सुझाव है कि es संस्करण का उपयोग न करें और वेबपैक को module प्रविष्टि को लक्षित करने दें। यह पैकेज के थोक के लिए पेड़ को हिलाने की अनुमति देता है लेकिन आप कुछ सूक्ष्म अनुकूलन पर ढीले हो जाते हैं। मैंने एस्मोड्यूल्स में सब कुछ ट्रांसपिलिंग का परीक्षण किया और 200KB से 180KB तक एक बंडल के स्टेट आकार में कुछ सुधार किए, लेकिन कुछ gzip डीओप्टिमाइजेशन को हिट किया जिसने gzipped आकार को 1KB तक बढ़ा दिया (मेम संस्करण)। इसलिए हर छोटी फ़ाइल के लिए ट्री-शेकिंग के बारे में ज़ोर न दें।