वेबपैक ट्री-शेकिंग और फिर से निर्यात के साथ 2 मिनट

प्रविष्टि

मुझे शुरू करने दो। हमारे पास एक महान विरासत के साथ एक अखंड दृष्टिकोण था। सेवाओं घटकों के साथ एक ही फाइल में रहते थे। सबकुछ मुखौटा के नारे के साथ मिलाया गया था: "सब कुछ हाथ से जाने दो - यह आसान है कि आपको क्या चाहिए।"

लक्ष्य

सब कुछ अधिक पठनीय, छोटा और तेज बनाएं।

कार्यान्वयन

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

ES6 + के आगमन के साथ, आयात का उपयोग करना संभव हो गया ... वाक्यविन्यास से एक महान विशेषता है, क्योंकि हम निर्यात का उपयोग भी कर सकते हैं ... से ।

रिफैक्टरिंग

इस संरचना के साथ एक फ़ाइल की कल्पना करें:

// ,  ,       function multiply (a, b) { return a * b; } function sum (a, b) { return a + b; } function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2) ); } 

हम इस कोड को फाइलों में विभाजित कर सकते हैं:

संरचना:

 utils multiply.js sum.js calculateSomethingSpecial.js 

और फ़ाइलें:

 // multiply.js export default function multiply (a, b) { return a * b; } or const multiply (a, b) => a * b; //    –     . 

 // sum.js export default function sum (a, b) { return a + b; } 

 // calculateSomethingSpecial.js import sum from "./sum"; export default function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2)); } 

अब हम व्यक्तिगत रूप से कार्यों को आयात कर सकते हैं। लेकिन अतिरिक्त लाइनों और आयात में इन लंबे नामों के साथ, यह अभी भी भयानक लग रहा है।

 // App.js import multiply from '../utils/multiply'; import sum from '../utils/sum'; import calculateSomethingSpecial from '../utils/calculateSomethingSpecial'; ... 

लेकिन इसके लिए हमारे पास एक अद्भुत विशेषता है जो नए जेएस सिंटैक्स के आगमन के साथ दिखाई दी, जिसे फिर से निर्यात (पुनः निर्यात) कहा जाता है। फ़ोल्डर में, हमें अपने सभी कार्यों को संयोजित करने के लिए एक index.js फ़ाइल बनाने की आवश्यकता है। और अब हम अपने कोड को इस तरह दोबारा लिख ​​सकते हैं:

 // utils/index.js export { default as sum } from './sum'; export { default as multiply } from './multiply'; export { default as calculateSomethingSpecial } from './calculateSomethingSpecial'; 

थोड़ा पॉडशमनिम App.js:

 // App.js import { multiply, sum, calculateSomethingSpecial } from '../utils'; 

हो गया।

परीक्षण।

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

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { sum } from "./utils"; import "./styles.css"; function App() { return ( <div className="App"> <h1>Re-export example</h1> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

परिशिष्ट:

आवेदन का उत्पादन संस्करण:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); //    **sum**   var r = t(0) , a = tn(r) , c = t(2) , o = tn(c); function l(e, n) { return e + n } t(9); var u = document.getElementById("root"); oarender(aacreateElement(function() { return aacreateElement("div", { className: "App" }, aacreateElement("h1", null, "Re-export example"), aacreateElement("p", null, l(5, 10))) }, null), u) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.e2563e9c.chunk.js.map 

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

परिशिष्ट:

आवेदन का उत्पादन संस्करण:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); var a = t(0) , r = tn(a) , c = t(2) , l = tn(c); t(9); var o = document.getElementById("root"); larender(racreateElement(function() { return racreateElement("div", { className: "App" //        React      }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, 50)) }, null), o) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.5db15096.chunk.js.map 

यहां हम कोड के अंदर के कार्यों को भी नहीं देखते हैं, क्योंकि वेबपैक परिनियोजन से पहले भी हमारे मूल्य को संकलित करता है।

अंतिम परीक्षण

तो, चलो अपना अंतिम परीक्षण चलाते हैं और एक बार में सभी सुविधाओं का उपयोग करके देखें कि क्या सब कुछ काम करता है।

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { multiply, sum, calculateSomethingSpecial } from "./utils"; import "./styles.css"; function App() { const specialData = [ { param1: 100, param2: 99 }, { param1: 2, param2: 31 } ]; const special = calculateSomethingSpecial(specialData); return ( <div className="App"> <h1>Re-export example</h1> <p>Special: </p> <div> {special.map((specialItem, index) => ( <div key={index}> Result #{index} {specialItem} </div> ))} </div> <p>{multiply(5, 10)}</p> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

परिशिष्ट:

आवेदन का उत्पादन संस्करण:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, a) { "use strict"; ar(n); var t = a(0) , r = an(t) , l = a(2) , p = an(l); //    **sum** function c(e, n) { return e + n } a(9); var u = document.getElementById("root"); parender(racreateElement(function() { var e = [{ param1: 100, param2: 99 }, { param1: 2, param2: 31 //      **calculateSomethingSpecial** }].map(function(e) { //    **sum**   return c(e.param1, e.param2) }); return racreateElement("div", { className: "App" }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, "Special: "), racreateElement("div", null, e.map(function(e, n) { return racreateElement("div", { key: n }, "Result #", n, " ", e) //     **multiply** })), racreateElement("p", null, 50), //     **sum**   racreateElement("p", null, c(5, 10))) }, null), u) }, 3: function(e, n, a) { e.exports = a(10) }, 9: function(e, n, a) {} }, [[3, 1, 2]]]); vie 

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

निष्कर्ष

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

पढ़ने के लिए धन्यवाद! साफ कोड और सुस्वादु रीफैक्टरिंग!