2019 में रिएक्ट कोड विभाजन

2019 है! हर कोई सोचता है कि वे कोड विभाजन को जानते हैं। तो - चलो दो बार चेक करें!

कोड बंटवारे के लिए क्या है?

संक्षेप में - कोड बंटवारा सिर्फ एक पूरी चीज को लोड नहीं करने के बारे में है। फिर आप इस पृष्ठ को पढ़ रहे हैं आपको पूरी साइट लोड नहीं करनी है। जब आप डेटाबेस से एकल पंक्ति का चयन कर रहे हैं - तो आपको सभी लेने की आवश्यकता नहीं है।
स्पष्ट? कोड विभाजन भी काफी स्पष्ट है, न केवल आपके डेटा के बारे में, बल्कि आपका कोड।

कौन (क्या?) कोड विभाजन कर रहा है?

React.lazy ? नहीं - यह केवल इसका उपयोग करता है। कोड बंटवारे को एक बंडल स्तर पर किया जा रहा है - वेबपैक्स, पार्सल, या "मूल" एस्कम मॉड्यूल के मामले में सिर्फ आपकी फाइल प्रणाली। कोड बंटवारा सिर्फ फाइलें हैं, फाइलें आप "बाद में" कहीं लोड कर सकते हैं। तो - सवालों के लिए " पावर कोड विभाजन क्या है? " - उत्तर है - एक "बंडलर"।

कौन (क्या) कोड विभाजन का उपयोग कर रहा है?

React.lazy का उपयोग कर रहा है। बस अपने बंडलर के कोड विभाजन का उपयोग कर। जब आयात किया गया तो सिर्फ कॉलिंग आयात। और बस इतना ही।

रिएक्ट-लोड करने योग्य क्या है?

React.lazy ने इसे ले लिया। और लोड करने की स्थिति को नियंत्रित करने के लिए Suspense तरह अधिक सुविधाएँ प्रदान की। इसलिए - इसके बजाय React.Lazy उपयोग करें।

हाँ, यह सब है। पढ़ने के लिए धन्यवाद और आपका दिन शुभ हो।

लेख समाप्त क्यों नहीं हुआ?

खैर। React.lazy और कोड स्प्लिटिंग के बारे में कुछ ग्रे जोन हैं React.lazy मैं उल्लेख करना भूल गया।

ग्रे जोन 1 - परीक्षण

इसकी अतुल्यकालिकता के कारण React.lazy का परीक्षण करना आसान नहीं है। यह सिर्फ "खाली" होगा, जब तक कि इसे अभी तक लोड नहीं किया जाता है (भले ही यह हो) - Promises और import करता है, और आलसी स्वीकार करता है, वादे करता है , जो हमेशा अगले टिक में निष्पादित होता है।

प्रस्तावित समाधान? आपको विश्वास नहीं होगा, लेकिन प्रस्तावित समाधान तुल्यकालिक तबेले का उपयोग करना है - पुल अनुरोध देखें । तो - हमारे imports बनाने की सुविधा देता है !!! (परीक्षण, या किसी अन्य सर्वर साइड केस के लिए आलसी समस्या को ठीक करने के लिए)

 const LazyText = lazy(() => ({ then(cb) { cb({default: Text}); // this is "sync" thenable }, })); const root = ReactTestRenderer.create( <Suspense fallback={<Text text="Loading..." />}> <LazyText text="Hi" /> // this lazy is not very lazy </Suspense>, ); 

यह आयात फ़ंक्शन को एक ज्ञापन तुल्यकालिक तत्कालीन मेमो में बदलना मुश्किल नहीं है।

 const syncImport = (importFn) => { let preloaded = undefined; const promise = importFn().then(module => preloaded = module); // ^ "auto" import and "cache" promise return () => preloaded ? { then: () => preloaded } : promise; // ^ return sync thenable then possible } const lazyImport = isNode ? syncImport : a => a; // ^ sync for node, async for browser const LazyComponent = React.lazy(lazyImport(() => import('./file')); 

ग्रे जोन 2 - एसएसआर

यदि आपको SSR की आवश्यकता नहीं है - कृपया लेख पढ़ना जारी रखें!

React.lazy SSR के अनुकूल है। लेकिन इसके लिए कार्य करने के लिए Suspense आवश्यकता होती है, और सस्पेंस सर्वर साइड फ्रेंडली नहीं होता है ।

2 समाधान हैं:

• उदाहरण के लिए मॉकिंग के माध्यम से सस्पेंस को फ्रैगमेंट से बदलें। फिर, तुल्यकालिक के साथ import के परिवर्तित संस्करण का उपयोग करें then आलसी को भी तुल्यकालिक व्यवहार करें।
  

   import React from 'react'; const realLazy = React.lazy; React.lazy = importer => realLazy(syncImport(importer)); React.Suspense = React.Fragment; // :P // ^ React SSR just got fixed :D 

यह एक अच्छा विकल्प है, लेकिन यह काफी क्लाइंट साइड फ्रेंडली नहीं होगा। क्यों? चलो 2 वें संभावित समाधान को परिभाषित करते हैं:

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

कोड बंटवारे पुस्तकालयों को निहारना

• सार्वभौमिक-घटक - सबसे पुराना, और अभी भी बनाए रखने योग्य पुस्तकालय। यह "आविष्कार" कोड के संदर्भ में विभाजन - कोड विभाजन को वेबपैक सिखाया।
• रिएक्ट-लोड करने योग्य - बहुत लोकप्रिय है, लेकिन एक अयोग्य पुस्तकालय। एक लोकप्रिय चीज थूकना कोड बनाया। मुद्दे बंद हैं, इसलिए आसपास कोई समुदाय नहीं है।
• लोड करने योग्य-घटक - एक विशेषता पूर्ण पुस्तकालय, यह उपयोग करने के लिए एक खुशी है, जिसमें सबसे सक्रिय समुदाय है।
• आयातित-घटक - एक एकल पुस्तकालय, जो वेबपैक के लिए बाध्य नहीं है, अर्थात् पार्सल या एएसएम को संभालने में सक्षम है।
• रिएक्ट-एसिंक्स-घटक - पहले से ही मृत पुस्तकालय (अभी तक लोकप्रिय), जिसने कोड विभाजन, कस्टम रिएक्ट ट्री ट्रैवर्सल और एसएसआर के आसपास सब कुछ पर महत्वपूर्ण प्रभाव डाला।
• एक अन्य पुस्तकालय - कई पुस्तकालय थे, जिनमें से कई वेबपैक विकास या रिएक्ट 16 से नहीं बचे थे - मैंने उन्हें यहां सूचीबद्ध नहीं किया है, लेकिन यदि आप एक अच्छे उम्मीदवार को जानते हैं - बस मुझे डीएम।

कौन सी लाइब्रेरी लेनी है?

यह आसान है - प्रतिक्रिया-लोड करने योग्य नहीं है - यह भारी असंबद्ध और अप्रचलित है, भले ही यह अभी भी मेगा लोकप्रिय हो। (और कोड विभाजन को लोकप्रिय बनाने के लिए धन्यवाद, फिर भी)

लोड करने योग्य-घटक - एक बहुत अच्छा विकल्प हो सकता है। यह बहुत अच्छी तरह से लिखा है, सक्रिय रूप से बनाए रखा है और बॉक्स से बाहर सब कुछ का समर्थन करता है। "पूर्ण गतिशील आयात" का समर्थन करें, आपको दी गई सहारा के आधार पर फ़ाइलों को आयात करने की अनुमति देता है, लेकिन इस प्रकार अप्राप्य। सस्पेंस का समर्थन करता है, इसलिए React.lazy को बदल सकता है।

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

प्रतिक्रिया-आयातित-घटक - थोड़ा अजीब है। यह बंडल स्वतंत्र है, इसलिए यह कभी नहीं टूटेगा (टूटने के लिए कुछ भी नहीं है), वेबपैक 5 और 55 के साथ काम करेगा, लेकिन यह एक लागत के साथ आता है। हालांकि SSR के दौरान पिछली लाइब्रेरीज़ पेज की बॉडी में सभी उपयोग की गई स्क्रिप्ट्स को जोड़ देंगी, और आप सभी स्क्रिप्ट्स को एक समानांतर - आयातित फाइलों के नाम से लोड करने में सक्षम होंगे, और मूल "आयात" को कॉल करेंगे (इसीलिए बंडल स्वतंत्र) इस्तेमाल किए गए विखंडू को लोड करने के लिए, लेकिन केवल मुख्य बंडल के अंदर से कॉल करने में सक्षम - इसलिए सभी अतिरिक्त स्क्रिप्ट केवल मुख्य डाउनलोड होने और निष्पादित होने के बाद लोड की जाएंगी। React.lazy की तरह पूर्ण गतिशील आयात का समर्थन नहीं करता है, और, परिणामस्वरूप - टाइप करने योग्य। सस्पेंस को भी सपोर्ट करता है। SSR पर तुल्यकालिक तबेले का उपयोग करता है। यह सीएसएस के लिए एक बिल्कुल अलग दृष्टिकोण है, और सही स्ट्रीम रेंडरिंग समर्थन है।

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

ग्रे जोन 3 - हाइब्रिड रेंडर

SSR एक अच्छी बात है, लेकिन, आप जानते हैं, कठिन है। लघु परियोजनाएँ चाहें तो SSR हो सकती हैं - इसके होने के कई कारण हैं - लेकिन वे इसे सेटअप और रखरखाव नहीं करना चाहती हैं।

SSR वास्तव में कठिन हो सकता है। यदि आप एक त्वरित जीत चाहते हैं, तो अगला प्रयास करें।

एसएसआर के लिए सबसे आसान मेरा समाधान, विशेष रूप से सरल एसपीए के लिए, पहले से रेंडर करना होगा। एक ब्राउज़र में अपने एसपीए को खोलने और "सेव" बटन को हिट करने की तरह। जैसा:

• React-snap - अपने पेज को "ब्राउज़र" में रेंडर करने के लिए कठपुतली (उर्फ हेडलेस क्रोम) का उपयोग करता है और परिणाम को स्थिर HTML पेज के रूप में सहेजता है।
• रेंडर्ट्रॉन - जो एक ही करता है, लेकिन एक अलग ( क्लाउड ) तरीके से।

"सर्वर" के बिना "SSR" का प्रतिपादन है। यह एक ग्राहक का उपयोग कर SSR है। जादू! और बॉक्स से बाहर काम कर रहे हैं ... ... ... लेकिन कोड थूकने के लिए नहीं।
इसलिए - आपने अपना पृष्ठ केवल ब्राउज़र में सहेजा है, HTML को सहेजा है और उसी सामान को लोड करने के लिए कहा है। लेकिन सर्वर साइड स्पेसिफिक कोड (सभी उपयोग किए गए चंक को इकट्ठा करने के लिए) का उपयोग नहीं किया गया था, क्योंकि यहां कोई सर्वर नहीं है !

पिछले भाग में, मैंने पुस्तकालयों की ओर इशारा किया है, जो इस्तेमाल किए गए विखंडू के बारे में जानकारी एकत्र करने के मामले में वेबपैक के लिए बाध्य हैं - वे हाइब्रिड रेंडर को बिल्कुल भी नहीं संभाल सकते थे।

लोड करने योग्य-घटक संस्करण 2 (वर्तमान संस्करण 5 के साथ असंगत), आंशिक रूप से प्रतिक्रिया-स्नैप द्वारा समर्थित था। समर्थन हो गया है।

प्रतिक्रिया-आयातित-घटक इस मामले को संभाल सकता है, जब तक कि यह बंडलर / साइड से बाध्य नहीं है, इसलिए एसएसआर या हाइब्रिड के लिए कोई अंतर नहीं है, लेकिन केवल प्रतिक्रिया-स्नैप के लिए, जब तक यह "राज्य जलयोजन" का समर्थन करता है, जबकि समर्पण नहीं करता है।

प्रतिक्रिया-आयातित-घटक की यह क्षमता इस लेख को लिखने के दौरान मिली थी, यह पहले ज्ञात नहीं थी - उदाहरण देखें। यह काफी आसान है।

और यहां आपको एक और समाधान का उपयोग करना होगा, जो अन्य सभी पुस्तकालयों के लिए लंबवत है।

प्रतिक्रिया-पहले से रेंडर घटक

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

• SSR के दौरान - घटक को रेंडर करें, एक <div /> के साथ लिपटे
• क्लाइंट पर - उस div को खोजें, और आंतरिक HTML का उपयोग करें जब तक कि कंपाउंड मृत HTML को बदलने के लिए तैयार न हो जाए।
• आपको लोड करने की आवश्यकता नहीं है, और इसके बजाय एक सफेद छेद को प्रस्तुत करने के लिए hydrate से पहले छींटे घटक के साथ एक रंक की प्रतीक्षा करें - बस पहले से रेंडर किए गए HTML का उपयोग करें, जो कि एक वास्तविक घटक प्रस्तुत करने के लिए बिल्कुल बराबर है, और जो पहले से मौजूद है - यह एक सर्वर (या हाइड्रिड) प्रतिक्रिया के साथ आता है।

इसलिए हमें हाइड्रेट से पहले लोड करने के लिए सभी चेंजेस का इंतजार करना होगा - सर्वर-रेंडर HTML से मिलान करने के लिए। इसलिए हम सर्वर-रेंडर HTML के टुकड़ों का उपयोग कर सकते हैं जब तक कि क्लाइंट तैयार न हो - यह हमारे द्वारा उत्पादित किए जाने वाले के बराबर है।

 import {PrerenderedComponent} from 'react-prerendered-component'; const importer = memoizeOne(() => import('./Component')); // ^ it's very important to keep the "one" promise const Component = React.lazy(importer); // or use any other library with ".prefetch" support // all libraries has it (more or less) const App = () => ( <PrerenderedComponent live={importer()}> {/* ^ shall return the same promise */ } <Component /> {/* ^ would be rendered when a component goes "live" */ } </PrerenderedComponent> ); 

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

TLDR?

• प्रतिक्रिया-लोड करने योग्य का उपयोग न करें, यह कोई मूल्यवान मूल्य नहीं जोड़ेगा
• React.lazy अच्छा है, लेकिन बहुत सरल है, फिर भी।
• SSR एक कठिन चीज है, और आपको इसे जानना चाहिए
• हाइब्रिड कठपुतली चालित प्रतिपादन एक बात है। कभी-कभी और भी कठिन बात।