PrefetchPlugin और विश्लेषण टूल का उपयोग करके वेबपैक के निर्माण समय का अनुकूलन कैसे करें?

Question

पिछला अनुसंधान:

जैसा कि वेबपैक का विकी कहता है, बिल्ड प्रदर्शन को अनुकूलित करने के लिए विश्लेषण टूल का उपयोग करना संभव है:

से: https://github.com/webpack/docs/wiki/build-performance#hints-from-n-tats

बिल्ड आँकड़े से संकेत

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

आप Webpack --profile --json >ysts.json चलाकर आवश्यक JSON फ़ाइल उत्पन्न कर सकते हैं

मैं आंकड़े फ़ाइल ( यहां उपलब्ध ) को वेबपैक के एनालाइज टूल में अपलोड करता हूं
और संकेत टैब के तहत मैंने प्रीफैचप्लगिन का उपयोग करने के लिए कहा है:

से: http://webpack.github.io/analyse/#hints

लॉन्ग मॉड्यूल चेन बनाते हैं

बिल्ड प्रदर्शन बढ़ाने के लिए प्रीफ़ेटिंग का उपयोग करें । श्रृंखला के बीच से एक मॉड्यूल को प्रीफ़ैच करें ।

मैं बाहर prefechPlugin पर उपलब्ध एकमात्र दस्तावेज खोजने के लिए वेब खोद रहा है:

से: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

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

---

मेरे सवाल:

• प्रीफ़ैचप्लुगिन का सही उपयोग कैसे करें?
• विश्लेषण उपकरण के साथ इसका उपयोग करने के लिए सही वर्कफ़्लो क्या है?
• मुझे कैसे पता चलेगा कि प्रीफैचप्लगिन काम करता है? मैं इसे कैसे माप सकता हूं?
• श्रृंखला के मध्य से एक मॉड्यूल को प्रीफ़ैच करने का क्या मतलब है ?

मैं वास्तव में कुछ उदाहरणों की सराहना करूंगा

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

Comments

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

— TetraDev

कंसोल आउटपुट का कहना है Uncaught SyntaxError: Unexpected token r in JSON at position 0कि किसी भी आँकड़े को अपलोड करते समय। Json

— TetraDev

@TetraDev का अर्थ है कि आपकी JSON फ़ाइल में कोई त्रुटि है। इसे एक टेक्स्ट एडिटर के साथ खोलने की कोशिश करें और देखें कि क्या ऐसा कुछ है जो वैध JSON की तरह नहीं दिखता है। (मुझे पहली पंक्ति में वेबपैक से डीबग आउटपुट के साथ एक ही समस्या है)।

— मौल

डॉक्स है, > stats.jsonलेकिन यह शीर्ष पर एक अतिरिक्त कुछ लाइन लिखता है जो पार्सर को तोड़ता है

— एलेक्स रीना

Answer 1

हाँ, प्री-फ़िच प्लग डॉक्यूमेंटेशन बहुत ज्यादा गैर-मौजूद है। यह अपने आप को पता लगाने के बाद, इसका उपयोग करने के लिए बहुत सरल है, और इसके लिए बहुत अधिक लचीलापन नहीं है। मूल रूप से, यह दो तर्क लेता है, संदर्भ (वैकल्पिक) और मॉड्यूल पथ (संदर्भ के सापेक्ष)। आपके मामले में संदर्भ /absolute/path/to/your/project/node_modules/react-transform-har/यह माना जाएगा कि आपके स्क्रीनशॉट में टिल्ड वेबपैकnode_modules के नोड_मॉडल रिज़ॉल्यूशन के अनुसार है ।

वास्तविक प्रीफ़ेच मॉड्यूल आदर्श रूप से तीन मॉड्यूल निर्भरता से अधिक गहरा नहीं होना चाहिए। तो आपके मामले isFunction.jsमें लंबी बिल्ड चेन वाला मॉड्यूल है और आदर्श रूप से इसे पूर्व-निर्धारित होना चाहिएgetNative.js

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

भले ही, आप प्रत्येक चेतावनियों के लिए एक नया प्लगइन जोड़ना चाहेंगे, जैसे:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

दूसरा तर्क मॉड्यूल के सापेक्ष स्थान के लिए एक स्ट्रिंग होना चाहिए। आशा है कि यह समझ में आता है।

Comments

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

— थ्रस्टीसेप्शन

यह थोड़ी देर में इस्तेमाल नहीं किया है, लेकिन इसकी शायद अभी भी एक ही है। प्लगइन में केवल दो तर्क होने चाहिए। एक, संदर्भ, जो मॉड्यूल के संदर्भ है तो उदाहरण के लिए app/components/module.jsxहोगा 'app'और मुझे लगता है कि दूसरा रिश्तेदार स्थान, यानी होना चाहिए'components/module.jsx'

— 4m1r

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

— थ्रोटसेप्शन

मैंने अपने प्रोजेक्ट के प्रदर्शन को बढ़ाने के लिए प्रीफ़ैच प्लगइन का उपयोग किया जो कि हैंडलबार्ज़ का उपयोग करता है। यहाँ वाक्य रचना है कि मेरे लिए काम किया है:new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),

— आंद्रे

इसके अलावा, यदि आप जिस चीज को प्रीफैच करना चाहते हैं, वह पैकेज नहीं है (यानी नहीं है node_modules), तो आप बस अनुरोध स्ट्रिंग पास कर सकते हैं । ध्यान दें कि पहला तर्क, संदर्भ वैकल्पिक है।

— नेचिटेटा

Answer 2

आपकी श्रृंखला के बीच में शायद ऐसा है react-transform-hmr/index.jsक्योंकि यह लगभग आधे रास्ते से शुरू होता है। आप PrefetchPlugin('react-transform-hmr/index')यह देखने के लिए अपनी प्रोफ़ाइल को आज़मा सकते हैं कि क्या यह आपके कुल समय को बनाने में मदद करता है।

Comments

केवल बदतर .. 2351ms से 2361ms तक, यह एक त्रुटि फेंकता हैEntry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate

— आसफ काटज़

ठीक है, 10ms का अंतर बदतर नहीं है, अंतर सांख्यिकीय रूप से महत्वहीन है। मैं w / विभिन्न चीजों, react-transform-hmrया react-transform-hmr/index.jsआदि के आसपास

— हारून जेन्सेन