वेबपैक के साथ सपनों का बंडल एकत्र करना

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

मैक्सिम सोस्नोव ( crazymax11 ) - N1.RU में फ्रंटेंड लीड ने कई बड़े प्रोजेक्ट्स में वेबपैक पेश किया जो पहले अपने स्वयं के कस्टम बिल्ड थे, और इसमें कई प्रोजेक्ट्स का योगदान दिया। मैक्सिम जानता है कि वेबपैक के साथ एक सपना बंडल कैसे बनाया जाए, इसे जल्दी से करें, और इसे कॉन्फ़िगर करें ताकि कॉन्फ़िगरेशन साफ, बनाए रखा जाए, और मॉड्यूलर हो।


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

एक विशिष्ट परियोजना में वेबपैक एकीकरण

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

- मोबाइल उपकरणों से आपकी साइट लोड नहीं होती है।
- हमारे लिए सब कुछ काम करता है। स्थानीय रूप से, सब ठीक है!

बस मामले में, डेवलपर सब कुछ प्रोफ़ाइल करने के लिए जाता है और देखता है कि मोबाइल उपकरणों के लिए बंडल का वजन 7 एमबी है और लोड होने में 30 सेकंड लगते हैं । यह किसी को सूट नहीं करता है और डेवलपर समस्या को हल करने के तरीके की तलाश शुरू करता है - वह लोडर को कनेक्ट कर सकता है या एक जादुई प्लग-इन ढूंढ सकता है जो सभी समस्याओं को हल करेगा। चमत्कारिक रूप से, ऐसा प्लगइन स्थित है। हमारा डेवलपर webpack-config में जाता है, इंस्टॉल करने की कोशिश करता है, लेकिन कोड की लाइन हस्तक्षेप करती है:

if (process.env.NODE_ENV === 'production') { config.module.rules[7].options.magic = true; } 

लाइन का अनुवाद इस प्रकार किया गया है: "यदि उत्पादन के लिए कॉन्फ़िगर किया जा रहा है, तो सातवां नियम लें और वहां magic = true डालें।" डेवलपर को नहीं पता है कि इसके साथ क्या करना है और इसे कैसे हल करना है। यह एक ऐसी स्थिति है जहां आपको सपनों के एक बंडल की आवश्यकता होती है।

सपनों का एक बंडल कैसे इकट्ठा करें?

सबसे पहले, आइए परिभाषित करें कि यह क्या है। सबसे पहले, सपना बंडल की दो मुख्य विशेषताएं हैं:

• इसका वजन थोड़ा कम है । कम वजन - जितनी तेजी से उपयोगकर्ता को एक काम करने वाला एप्लिकेशन मिलेगा। आप नहीं चाहते कि आपकी साइट 15 सेकंड के लिए खुले।
• उपयोगकर्ता केवल वही डाउनलोड करता है जिसे साइट के वर्तमान पृष्ठ को प्रदर्शित करने के लिए डाउनलोड करने की आवश्यकता होती है , और बाइट अधिक नहीं!

और बंडल के आकार को कम करने के लिए, आपको पहले इसके आकार का मूल्यांकन करना होगा।

दर बंडल आकार

सबसे लोकप्रिय समाधान WebpackBundleAnalyzer प्लगइन है। यह एप्लिकेशन बिल्ड आंकड़े एकत्र करता है और एक इंटरैक्टिव पेज को प्रस्तुत करता है जहां आप प्रत्येक मॉड्यूल के स्थान और वजन को देख सकते हैं।



यदि यह पर्याप्त नहीं है, तो आप एक अन्य प्लगइन का उपयोग करके निर्भरता ग्राफ बना सकते हैं।



या एक पाई चार्ट ।



यदि यह पर्याप्त नहीं है, और आप विपणक को वेबपैक बेचना चाहते हैं, तो आप एक पूरे ब्रह्मांड का निर्माण कर सकते हैं, जहां प्रत्येक बिंदु एक मॉड्यूल है, जैसे ब्रह्मांड में एक तारा।



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

बंडल कैसे कम करें

• सबसे स्पष्ट UglifyJS में प्लग करना है ताकि यह जावास्क्रिप्ट को छोटा करे।
• विशेष लोडर और प्लगइन्स का उपयोग करें जो एक विशिष्ट संसाधन को संपीड़ित और अनुकूलित करते हैं। उदाहरण के लिए, सीएसएस के लिए सीएसएस-नैनो , या एसवीजीओ , जो एसवीजी का अनुकूलन करता है।
• सभी फाइलों को सीधे वेबपैक पर gzip / brotli plugins के माध्यम से संपीड़ित करें ।
• अन्य उपकरण।

अब हम समझेंगे कि बंडल से अतिरिक्त कैसे फेंकना है।

बाहर फेंक दो

import moment from 'moment' साथ एक लोकप्रिय उदाहरण में इस पर विचार करें। जेएस : import moment from 'moment' । यदि आप एक खाली एप्लिकेशन लेते हैं, तो उसमें moment.js और ReactDOM आयात करें, और फिर इसे WebpackBundleAnalyzer के माध्यम से पास करें, आपको निम्न चित्र दिखाई देगा।



यह पता चला है कि जब आप एक दिन, एक घंटे, एक तारीख को जोड़ते हैं, या बस "15 मिनट" में लिंक डालना चाहते हैं। क्षणों का उपयोग करते हुए, आप एक पूरे 230 कोड के कोड को कनेक्ट करते हैं! ऐसा क्यों हो रहा है और यह कैसे हल किया जाता है?

पल में लोड हो रहा है

क्षणों में एक फ़ंक्शन होता है। स्थान निर्धारित करता है:

 function setLocale(locale) { const localePath = 'locale/' + locale + '.js'; this._currentLocale = require(localePath); } 

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



समाधान बहुत सरल है - हम वेबपैक से एक मानक प्लगइन लेते हैं और इसे कहते हैं: "यदि आप देखते हैं कि कोई बहुत सारे स्थान डाउनलोड करना चाहता है, क्योंकि वे यह निर्धारित नहीं कर सकते कि कौन सा है, बस रूसी एक लें!"



वेबपैक केवल रूसी लेगा, और वेबपैक बंडलेएनालियर 54 Kb दिखाएगा, जो पहले से ही 200 Kb आसान है।

मृत कोड उन्मूलन

अगला अनुकूलन जो हमें रुचता है वह है डेड कोड एलिमिनेशन । निम्नलिखित कोड पर विचार करें।

 const cond = true; if (!cond) { return false; } return true; someFunction(42); 

इस कोड से अधिकांश लाइनों को अंतिम बंडल में ज़रूरत नहीं है - शर्त के साथ ब्लॉक को निष्पादित नहीं किया जाएगा, वापसी के बाद भी फ़ंक्शन। आपको केवल छोड़ने की आवश्यकता है जो return true । यह ठीक वही है जो डेड कोड का उन्मूलन है: बिल्ड टूल कोड का पता लगाता है जिसे निष्पादित नहीं किया जा सकता है और इसे काट सकता है। एक अच्छी सुविधा है कि UglifyJS ऐसा कर सकता है।

अब अधिक उन्नत डेड कोड एलिमिनेशन - ट्री शेकिंग विधि पर चलते हैं।

पेड़ का हिलना

मान लीजिए कि हमारे पास एक एप्लिकेशन है जो लॉडश का उपयोग करता है। मुझे पूरी तरह से संदेह है कि कोई भी पूरे लॉडश का उपयोग कर रहा है। सबसे अधिक संभावना है, जैसे कई कार्य जैसे, IsEmpty, UnionBy, या जैसे का शोषण किया जाता है ।

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

ट्री शेपिंग वेबपैक में कैसे काम करता है

मान लीजिए कि आपके पास एक कोड है:

 import { a } from './a.js'; console.log(a); 

कोड बहुत सरल है: कुछ मॉड्यूल से, चर को आयात करें और इसे आउटपुट करें। लेकिन इस मॉड्यूल में दो चर हैं: a और b । हमें चर b की आवश्यकता नहीं है, और हम इसे निकालना चाहते हैं।

 export const a = 3 export const b = 4 

जब वेबपैक आता है, तो यह आयात कोड को इस में परिवर्तित करता है:

 var d = require(0); console.log(d["a"]); 

हमारा import require में बदल गया, लेकिन console.log । बदल नहीं गया है।

वेबपैक निर्भरता निम्न कोड में परिवर्तित होती है:

 var a = 3; module.exports["a«] = a; /* unused harmony export b */ var b = 4; 

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

वेबपैक ट्री हिलाना केवल तभी काम करता है जब आपके पास किसी प्रकार का कोड मिनिफायर होता है, जैसे UglifyJS या babel-minify ।

आइए अधिक दिलचस्प मामलों पर विचार करें - जब ट्री शेकिंग काम नहीं करता है।

जब ट्री मिलाते काम नहीं करता है

केस नंबर 1. आप कोड लिखते हैं:

 module.exports.a = 3; module.exports.b = 4; 

कोड को वेबपैक के माध्यम से चलाएँ, और यह वैसा ही रहता है। ऐसा इसलिए है क्योंकि यदि आप ES6 मॉड्यूल का उपयोग करते हैं तो बंडलर ट्री को हिलाते हुए व्यवस्थित करता है। यदि आप CommonJS मॉड्यूल का उपयोग करते हैं, तो ट्री शेकिंग काम नहीं करेगा।

केस नंबर 2. आप ES6 मॉड्यूल और नामित निर्यात के साथ कोड लिखते हैं।

 export const a = 3 export const b = 4 

यदि आपका कोड Babel के माध्यम से चलता है और आपने मॉड्यूल विकल्प को गलत पर सेट नहीं किया है, तो Babel आपके मॉड्यूल को CommonJS में लाएगा, और Webpack फिर से ट्री शेकिंग को निष्पादित नहीं कर पाएगा, क्योंकि यह केवल ES6 मॉड्यूल के साथ काम करता है।

 module.exports.a = 3; module.exports.b = 4; 

तदनुसार, हमें यह सुनिश्चित करने की आवश्यकता है कि हमारी विधानसभा योजना में कोई भी ईएस 6 मॉड्यूल ट्रांसशिप नहीं करेगा।

केस नंबर 3. मान लीजिए कि हमारे पास एक ऐसा बेकार वर्ग है जो कुछ भी नहीं करता है: export class ShakeMe {} । इसके अलावा, हम अभी भी इसका उपयोग नहीं करते हैं। जब वेबपैक आयात और निर्यात के माध्यम से जाता है, तो बैबेल एक फ़ंक्शन में बदल जाएगा, और बंडल यह नोट करेगा कि फ़ंक्शन नहीं है:

 /* unused harmony e[port b */ var ShakeMe = function () { function ShakeMe() { babelHelpers.classCallCheck(this, ShakeMe); } return ShakeMe; }(); 

ऐसा लगता है कि सब कुछ ठीक होना चाहिए, लेकिन अगर हम करीब से देखें, तो हम देखेंगे कि इस फ़ंक्शन के अंदर एक वैश्विक चर babelHelpers , जिसमें से कुछ फ़ंक्शन कहा जाता है। यह एक साइड इफेक्ट है : UglifyJS देखता है कि कुछ वैश्विक फ़ंक्शन को बुलाया जा रहा है और कोड में कटौती नहीं करेगा, क्योंकि यह डर है कि कुछ टूट जाएगा।

जब आप कक्षाएं लिखते हैं और उन्हें बाबेल के माध्यम से चलाते हैं, तो वे कभी नहीं कटते हैं। यह कैसे तय हुआ? एक मानकीकृत हैक है - एक टिप्पणी जोड़ें /*#__PURE__*/ समारोह से पहले:

 /* unused harmony export b */ var ShakeMe = /*#__PURE__*/ function () { function ShakeMe() { babelHelpers.classCallCheck(this, ShakeMe); } return ShakeMe; }(); 

तब UglifyJS इस शब्द पर विश्वास करेगा कि अगला फ़ंक्शन शुद्ध है। सौभाग्य से, बैबिल 7 अब ऐसा कर रहा है, और बैबेल 6 में, अब तक कुछ भी नहीं हटाया गया है।

नियम: यदि आपका कहीं पर कोई साइड इफेक्ट है, तो UglifyJS कुछ नहीं करेगा।

संक्षेप में:

• ट्री शेकिंग npm से अधिकांश पुस्तकालयों के लिए काम नहीं करता है , क्योंकि वे सभी कॉमनजेएस से हैं और पुराने बबेल द्वारा बनाए गए हैं।
• सबसे अधिक संभावना है, ट्री शेकिंग उन पुस्तकालयों के लिए पर्याप्त रूप से काम करेगा जो इसके लिए पहले से तैयार हैं , उदाहरण के लिए, लोडश-एस, डेट-फेंस और आपका कोड या लाइब्रेरी।
• UglifyJS विधानसभा में शामिल है।
• ES6 मॉड्यूल का उपयोग किया।
• कोई साइड इफेक्ट नहीं।

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

हम केवल आवश्यक कार्यक्षमता लोड करते हैं

हम इस भाग को दो में विभाजित करते हैं। पहले भाग में, केवल उस कोड को जिसे उपयोगकर्ता की आवश्यकता है लोड किया गया है : यदि उपयोगकर्ता आपकी साइट के मुख्य पृष्ठ पर जाता है, तो वह व्यक्तिगत खाता पृष्ठों को लोड नहीं करता है। दूसरे में, कोड में बदलाव से संसाधनों का सबसे छोटा संभव पुनः लोड हो रहा है ।

हम केवल आवश्यक कोड लोड करते हैं

एक काल्पनिक अनुप्रयोग की संरचना पर विचार करें। यह है:

• प्रवेश-बिंदु - एपीपी।
• तीन पृष्ठ: घर, खोज और कार्ड।

पहली समस्या जिसे हम हल करना चाहते हैं वह है एक सामान्य कोड जारी करना । आइए हम सभी पृष्ठों के लिए सामान्य कोड के रूप में लाल कोड को चिह्नित करते हैं, मुख्य पृष्ठ के लिए हरे रंग का चक्र और खोज पृष्ठ। शेष आंकड़े विशेष रूप से महत्वपूर्ण नहीं हैं।



जब उपयोगकर्ता मुख्य पृष्ठ से खोज पर आता है, तो वह बॉक्स और सर्कल दोनों को दूसरी बार फिर से लोड करेगा, हालांकि वह पहले से ही उनके पास है। आदर्श रूप में, हम ऐसा कुछ देखना चाहेंगे।



यह अच्छा है कि वेबपैक 4 में पहले से ही एक अंतर्निहित प्लगइन है जो हमारे लिए ऐसा करता है - स्प्लिटकॉन्क्सप्लगिन । प्लगइन एप्लिकेशन कोड या नोड मॉड्यूल कोड को बाहर निकालता है, जो एक अलग चंक में कई चंक्स द्वारा उपयोग किया जाता है, जबकि यह सुनिश्चित करते हुए कि सामान्य कोड के साथ चंक 30 Kb से अधिक होगा, और पृष्ठ को लोड करने के लिए आपको 5 से अधिक नहीं डाउनलोड करना होगा। रणनीति इष्टतम है: बहुत छोटी मात्रा में लोड करना लाभदायक नहीं है, और बहुत अधिक मात्रा को लोड करना लंबे समय तक नहीं है और http2 पर भी कम मात्रा में डाउनलोड करने के रूप में कुशल नहीं है । वेबपैक के 2 या 3 संस्करणों पर इस व्यवहार को दोहराने के लिए, मुझे अनिर्दिष्ट सुविधाओं के साथ 20-30 लाइनें लिखनी थीं। अब इसे एक लाइन में हल किया जा रहा है।

CSS Takeaway

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

न्यूनतम संभव संसाधन पुनः लोड करें

हम यह सुनिश्चित करेंगे कि यह सुनिश्चित करने के लिए कि जारी करते समय, उदाहरण के लिए, मुख्य पृष्ठ पर एक नया प्रोमो ब्लॉक, उपयोगकर्ता कोड के सबसे छोटे संभावित हिस्से को फिर से लोड करेगा ।

अगर हमारे पास वर्जनिंग होती तो सबकुछ ठीक होता। यहां हमारे पास संस्करण N का मुख्य पृष्ठ है, और प्रोमो ब्लॉक के रिलीज़ होने के बाद - संस्करण N + 1। वेबपैक हैशिंग का उपयोग करके बॉक्स के ठीक बाहर एक समान तंत्र प्रदान करता है। वेबपैक सभी संपत्तियों को इकट्ठा करने के बाद, इस स्थिति में app.js, यह उसकी सामग्री हैश की गणना करेगा और इसे ऐप प्राप्त करने के लिए फ़ाइल नाम में जोड़ देगा। [हैश] .js यह वह संस्करण है जिसकी हमें आवश्यकता है।



आइए देखें कि यह कैसे काम करता है। हैश चालू करें, मुख्य पृष्ठ पर परिवर्तन करें, और देखें कि क्या मुख्य पृष्ठ का कोड वास्तव में बदल गया है। हम देखेंगे कि दो फाइलें बदल गई हैं: मुख्य और app.js.



ऐसा क्यों हुआ, क्योंकि यह अतार्किक है? यह समझने के लिए, चलो app.js. पर एक नज़र डालें इसमें तीन भाग होते हैं:

• आवेदन कोड
• वेबपैक रनटाइम;
• अतुल्यकालिक विखंडू के लिंक।

जब हम कोड को मुख्य रूप से बदलते हैं, तो इसकी सामग्री और हैश बदल जाते हैं, जिसका अर्थ है कि इसके लिंक ऐप में भी बदल जाते हैं। ऐप खुद भी बदल जाएगा और इसे रीबूट करना होगा। इस समस्या का समाधान app.js को दो टुकड़ों में विभाजित करना है: एप्लिकेशन कोड और वेबपैक रनटाइम और लिंक को अतुल्यकालिक हिस्सा। वेबपैक 4 हमारे लिए एक रनटाइम विकल्प के साथ सब कुछ करता है, जिसका वजन बहुत कम होता है - गज़िप में 2 केबी से कम। उपयोगकर्ता के लिए इसे रिबूट करना व्यावहारिक रूप से बेकार है। RuntimeChunk सिर्फ एक विकल्प के साथ सक्षम है:

 optimization: { runtimeChunk: true } 

वेबपैक 3 और 2 में, हम एक के बजाय 5-6 लाइनें लिखेंगे। यह बहुत अधिक नहीं है, लेकिन फिर भी एक अनावश्यक असुविधा है।



सब कुछ बहुत अच्छा है, हमने लिंक और रनटाइम बनाना सीखा! चलो मुख्य में एक नया मॉड्यूल लिखते हैं, इसे जारी करते हैं, और - ऑप! - अब, सामान्य तौर पर, सब कुछ पुनरारंभ होता है।



ऐसा क्यों? आइए देखें कि वेबपैक में मॉड्यूल कैसे काम करते हैं।

वेबपैक मॉड्यूल

मान लीजिए कि कोड है जिसमें आप मॉड्यूल जोड़ते हैं a , b , d, और e :

 import a from 'a'; import b from 'b'; import d from 'd'; import e from 'e'; 

वेबपैक आयात को आवश्यकता के अनुसार परिवर्तित करता है: ए , बी , डी, और ई को आवश्यकता (0), आवश्यकता (1), आवश्यकता (2), और आवश्यकता (3) द्वारा प्रतिस्थापित किया जाता है।

 var a = require(0); var b = require(1); var d = require(2); var e = require(3); 

एक ऐसी तस्वीर की कल्पना करें जो बहुत बार होती है: आप import c from 'c'; एक नया मॉड्यूल c import c from 'c'; लिखते हैं import c from 'c'; और इसे कहीं बीच में चिपकाएँ:

 import a from 'a'; import b from 'b'; import c from 'c'; import d from 'd'; import e from 'e'; 

जब वेबपैक सब कुछ संसाधित करता है, तो यह नए मॉड्यूल के आयात को आवश्यकता में परिवर्तित करता है (2):

 var a = require(0); var b = require(1); var c = require(2); var d = require(3); var e = require(4); 

मॉड्यूल डी और ई , जो 2 और 3 थे, उन्हें 3 और 4 नंबर प्राप्त होंगे - नई आईडी। एक सरल निष्कर्ष इस प्रकार है: क्रम संख्या का आईडी के रूप में उपयोग करना थोड़ा मूर्खतापूर्ण है, लेकिन वेबपैक इसे करता है।

यूनिक आईडी के रूप में सीरियल नंबर का उपयोग न करें

समस्या को ठीक करने के लिए, एक अंतर्निहित वेबपैक समाधान है - HashedModuleIdsPlugin :

 new webpack.HashedModuleIdsPlugin({ hashFunction: 'md4′, hashDigest:'base64′, hashDigestLength: 4, }), 

यह प्लगइन पूर्ण पथ से फ़ाइल में डिजिटल आईडी के बजाय md4 हैश के 4 वर्णों का उपयोग करता है। इसके साथ, हमारी आवश्यकता इन में बदल जाएगी:

 var a = require('YmRl'); var b = require('N2Fl'); var c = require('OWE4′); var d = require('NWQz'); var e = require('YWVj'); 

संख्या के बजाय, पत्र दिखाई दिए। बेशक, एक छिपी हुई समस्या है - यह हैश की टक्कर है । हम इस पर एक बार ठोकर खा चुके हैं और आपको 4. के बजाय 8 वर्णों का उपयोग करने की सलाह दे सकते हैं। हैश को सही ढंग से कॉन्फ़िगर करने के बाद, सब कुछ उस तरह से काम करेगा, जो मूल रूप से चाहते थे।

अब हम जानते हैं कि सपने के बंडलों को कैसे इकट्ठा किया जाए।

• छोटा करें ।
• कोड विभाजन का उपयोग करें ।
• हैश सेट करें ।

हमने इकट्ठा करना सीखा, और अब हम गति पर काम करेंगे।

कैसे एक सपना बंडल जल्दी से इकट्ठा करने के लिए?

हमारे एन 1 आरयू में, सबसे बड़े आवेदन में 10,000 मॉड्यूल शामिल हैं, और अनुकूलन के बिना, इसमें 28 मिनट लगते हैं। हम दो मिनट के लिए विधानसभा को गति देने में सक्षम थे! हमने ऐसा कैसे किया? किसी भी गणना को गति देने के 3 तरीके हैं, और तीनों वेबपैक पर लागू होते हैं।

विधानसभा समानांतरकरण

पहली चीज जो हमने की वह थी विधानसभा को समानांतर बनाना । इसके लिए हमारे पास:

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

कैशिंग बिल्ड परिणाम

वेबपैक असेंबली को गति देने के लिए कैशिंग असेंबली परिणाम सबसे प्रभावी तरीका है।

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

ग्राफ विधानसभा समय दिखाता है। ब्लू बार - 100% बिल्ड टाइम, कैश-लोडर के बिना, और इसके साथ - 7% धीमा। ऐसा इसलिए है क्योंकि कैश-लोडर कैश सिस्टम को फ़ाइल सिस्टम में सहेजने में अतिरिक्त समय खर्च करता है। पहले से ही दूसरी विधानसभा में, हमें एक ठोस लाभ प्राप्त हुआ - विधानसभा 2 गुना तेज थी।



दूसरा समाधान अधिक परिष्कृत है - हार्डसोर्सप्लगिन । मुख्य अंतर: कैश-लोडर सिर्फ एक लोडर है जो केवल कोड या फ़ाइलों के साथ लोडरों की एक श्रृंखला में काम कर सकता है, और हार्डस्कोरप्लगिन के पास वेबपैक पारिस्थितिकी तंत्र तक लगभग पूर्ण पहुंच है, अन्य प्लगइन्स और लोडर के साथ काम कर सकता है, और यह थोड़ी सी कैशिंग के लिए पारिस्थितिकी तंत्र का विस्तार करता है। ऊपर दिए गए ग्राफ़ से पता चलता है कि पहले लॉन्च पर, बिल्ड समय में 37% की वृद्धि हुई थी, लेकिन सभी कैश के साथ दूसरे लॉन्च के साथ, हमने 5 बार त्वरित किया।



सबसे अच्छी बात यह है कि आप दोनों समाधानों का एक साथ उपयोग कर सकते हैं, जो कि हम N1.RU में करते हैं। सावधान रहें, क्योंकि कैश के साथ समस्याएं हैं, जिसके बारे में मैं थोड़ी देर बाद चर्चा करूंगा।

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

और अब समस्याएं।

कैशिंग मुद्दों

• कैश सही तरीके से मान्य नहीं हो सकता है ।
• एप्लाइड समाधान जुड़े प्लगइन्स, लोडर, आपके कोड या एक दूसरे के साथ काम नहीं कर सकते हैं । इस संबंध में, कैश-लोडर एक सरल और परेशानी मुक्त समाधान है। लेकिन HardSourcePlugin के साथ आपको अधिक सावधान रहने की आवश्यकता है।
• यदि सब कुछ टूट गया है, तो यह पहली बार शुरू करना कठिन है । जब कैशिंग सही तरीके से काम नहीं करता है और एक अयोग्य त्रुटि होती है, तो यह पता लगाना बहुत मुश्किल होगा कि समस्या क्या है।

उत्पादन पर कैसे बचा जाए?

प्रक्रिया को गति देने का अंतिम तरीका प्रक्रिया का कोई भी भाग नहीं करना है। आइए विचार करें कि आप उत्पादन पर कैसे बचा सकते हैं? हम क्या नहीं कर सकते? जवाब छोटा है - हम कुछ नहीं कर सकते ! हमें उत्पादन में किसी चीज को मना करने का कोई अधिकार नहीं है, लेकिन हम देव में बहुत कुछ बचा सकते हैं।

किस पर बचाना है:

• जब तक हमें उनकी आवश्यकता न हो, तब तक स्रोत मानचित्र एकत्र न करें।
• सीएसएस लोडर के माध्यम से सीएसएस हटाने और प्रसंस्करण के साथ एक शांत योजना के बजाय शैली-लोडर का उपयोग करें । स्टाइल-लोडर अपने आप में बहुत तेज़ है, क्योंकि यह सीएसएस लाइन लेता है और इसे एक फ़ंक्शन में धकेलता है जो उस लाइन को स्टाइल टैग में सम्मिलित करता है।
• आप केवल विशेष रूप से उपयोग किए जाने वाले ब्राउज़र को ब्राउज़र सूची में छोड़ सकते हैं - सबसे अधिक संभावना है कि यह अंतिम क्रोम है । इससे बहुत तेजी आएगी ।
• UglifyJS, css-nano, gzip / brotli: संसाधनों के किसी भी अनुकूलन को पूरी तरह से त्याग दें।

निर्माण त्वरण समानांतर है, कैशिंग और गणना से इनकार। इन तीन सरल चरणों का पालन करके, आप बहुत तेजी ला सकते हैं।

वेबपैक को कैसे कॉन्फ़िगर करें?

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

परियोजना में विकास को कॉन्फ़िगर करें

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

क्रम में रखें

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

4 :

• Loaders.
• Plugins.
• Presets.
• Parts.

.

Plugin/Loader

, , API, , .

यह कुछ इस तरह दिखता है:

 /** *  JSdoc * @param {Object} options * @see    */ module.exports = function createPlugin(options) { return new Plugin(options); }; 

, , , . , url-loader :

 /** * url-loader    file-loader.        * * @example * -   some-image.png.     url-loader,  url-loader    * 1.    ,  url-loader    base64  * 2. , url-loader    outputPath + name     ,     . *    some-image.png,     outputPath/images/some-image.12345678hash.png,  url-loader  * publicPath/images/some-image.12345678hash.png * * @param {string} prefix    * @param {number} limit    ,    * @return {Object} loader   * @see https://www.npmjs.com/package/url-loader */ 

, , , , , , . , , , , url-loader. :

 function urlLoader(prefix = 'assets', limit = 100) { return { loader: 'url-loader', options: { limit, name: `${prefix}/[name].[hash].[ext]` } }; }; 

. , Loader .

Preset

webpack. , , , webpack, . — , , scss-:

 { test: /\.scss$/, use: [cssLoader, postCssLoader, scssLoader] } 

.

Part

— , . , , . , :

 entry: { app: './src/Frontend/app.js' }, output: { publicPath: '/static/cabinet/app/', path: path.resolve('www/static/app') }, 

:

• , , , json, , , splitChunks.
• dev , , js/css
• Part , output, publicPath, entry-point , , source map.

Webpack-merge . , . webpack-merge 3-7 , Babel-loader, . , .

संक्षेप में देना। , . , webpack — . , .

, !

— Frontend Conf . , — , , Frontend Conf ++ .

- ? FrontenConf ++ , 27 28 . 27 , 15 . — !