Loading...

React in Hindi – Code Splitting

  • Introduction to react code splitting in Hindi
  • React import() method in Hindi
  • React.lazy() method in Hindi

Introduction to React Code Splitting

Code splitting एक feature है जो की Webpack और Browserify जैसे bundlers द्वारा support किया जाता है। Code splitting के बारे में जानने से पूर्व bundling के बारे में जान लेना आवश्यक है।

Following Imported Files and Merging Them Into Single File

Bundling एक process होती है जिसमें Application के द्वारा import की गयी files को follow किया जाता है और उन्हें एक single file के रूप में merge किया जाता है। यह single file bundle कहलाती है।

ज़्यादातर React applications की files Webpack और Browserify जैसे tools द्वारा bundle की जाती है।

Files को bundle करने की advantage यह होती है की किसी web page में एक bundle को include किया जा सकता है और पूरी application को एक ही बार में load किया जा सकता है।

Example: Bundling in React

आइए React में bundling को एक उदाहरण द्वारा समझने का प्रयास करते है। मान लीजिए आपने एक application create की है जिसे आपने main.js नाम दिया है।

// main.js

import { hex } from './Colors.js';

console.log(hex("red"));

इस application में आपने Colors.js file के hex method को import किया है जो की color pass किए जाने पर उसकी hex value return करता है।

// Colors.js

export function hex(color){
     return color == "red" ? "#ff0000" : "Only red, green and blue colors.";
     return color == "green" ? "#008000" : "Only red, green and blue colors.";
     return color == "blue" ? "#0000ff" : "Only red, green and blue colors.";    
}

Bundle किए जाने पर application में import की गयी file Colors.js को follow किया जाएगा और उसके hex() function को bundle में import कर लिया जाएगा। इसके बाद उस function को application में available दूसरे code के साथ merge करके करके bundle किया जाएगा।

यह app bundle किए जाने पर कुछ इस प्रकार show होगी।

export function(color){
     return color == "red" ? "#ff0000" : "Only red, green and blue colors.";
     return color == "green" ? "#008000" : "Only red, green and blue colors.";
     return color == "blue" ? "#0000ff" : "Only red, green and blue colors.";    
}

console.log(hex("red"));

Winding Up with A Large Bundle

Bundling एक बहुत अच्छी practice होती है। लेकिन कई बार जब आपकी application बड़ी होती है तो bundle भी बड़ा होता जाता है। ख़ासकर यदि आप third party libraries use कर रहे है तो bundle की size और भी बड़ी हो जाती है।

ऐसे में आप कई बार बहुत बड़े bundles create कर सकते है जिन्हें load होने में बहुत अधिक समय लग सकता है और जो manage करने में भी मुश्किल होते है।

Create Multiple Bundles That Can Be Dynamically Loaded at Runtime

एक बड़े bundle के साथ कार्य करने से बेहतर है की bundle को split कर दिया जाए। Code splitting एक ऐसी ही process है जिसमें Webpack और Browserify जैसे bundlers द्वारा आप multiple bundles create कर सकते है जिन्हें runtime पर dynamically load किया जा सकता है।

Can Help You Lazy-Load Your App

Code splitting आपको अपनी application को lazy load करने में मदद करती है। यानी की आप user को सिर्फ़ वो ही elements show करते है जिनकी उसको उस समय पर आवश्यकता होती है।

Lazy load करते समय आप application में code कम नहीं करते है बल्कि उस code को load नहीं करते है जिसकी user को आवश्यकता नहीं है। इसके अलावा आप initial load के समय required code की मात्रा को भी कम कर देते है।

Dynamic import() Syntax

React में import() method का प्रयोग files को import करने के लिए किया जाता है। इस method का dynamic import syntax files को dynamically import करने के लिए use किया जा सकता है।

Dynamic import() syntax के द्वारा आप प्रभावी code splitting perform कर सकते है। उदाहरण के लिए normally किसी file से एक method इस प्रकार import किया जाता है।

import { methodName } from './fileName.js';

यह syntax आपकी current file में method को import कर देता है फिर चाहे उस समय आपको इसकी आवश्यकता हो या ना हो। यानी की इस प्रकार import किए जाने पर method application की initial load के समय ही import कर लिया जाएगा। इससे application का load time और अधिक हो जाएगा जो को application की performance को प्रभावित करेगा।

इस प्रकार import करने की बजाय आप इस प्रकार dynamic import syntax use कर सकते है।

import("./filename").then(fileName =>{
   //use method here using fileName
})

इस code में सबसे पहले file को import किया गया है। इसके बाद उस file पर then method call किया गया है। then() method में file के नाम का उपयोग करते हुए method को anonymously call किया जाएगा।

यह code function को केवल तब ही import करता है जब उसकी आवश्यकता होती है। यदि आप application में dynamic import() syntax का प्रयोग करते है तो आपकी application की performance improve होती है, क्योंकि कोई भी functionality केवल तब ही import की जाती है जब उसकी requirement होती है।

WebPack tool में जब इस प्रकार का code encounter होता है तो automatically code splitting शुरू कर दी जाती है। Create React App tool में तो यह पहले से ही configured होता है। इसके अलावा Next.js द्वारा भी यह syntax support किया जाता है।

Dynamic import() syntax एक ECMAScript proposal है। यह currently language standard का part नहीं है।

React.lazy() Function

React में lazy() function द्वारा आप dynamically import किए गए component को एक regular component की तरह render कर सकते है।

Normally जब एक dynamically import किए गए component को render करवाया जाता है तो वह पहले उस file से import होता है इसके बाद render किया जाता है।

React.lazy() function के द्वारा आप import किए गए component को element के roop में प्राप्त कर सकते है और उसे बिना बार बार file से import किए render करवा सकते है।

उदाहरण के लिए नीचे दिए गए code को देखिए।

import ImportedComponent from './ImportedComponent';

function CurrentComponent(){
  return(
         <div>
              <ImportedComponent />
         </div>
  );
}

इस code में जब imported component render होगा तो पहले वह file se import किया जाएगा इसके बाद load होगा। मान लीजिए आप इस component को multiple times application में render करवा रहे है तो ऐसे में हर बार यह component import किया जाएगा जो की application की performance को प्रभावित कर सकता है।

क्योंकि इस code में component को dynamically भी नहीं load किया गया है। इसलिए इससे program का load time और भी अधिक हो जाएगा।

इस situation में आप lazy() function का प्रयोग कर सकते है और component को dynamically import करते हुए एक React element के रूप में प्राप्त कर सकते है और किसी regular component की तरह load करवा सकते है।

const ImportedComponent = React.lazy(() => import('./ImportedComponent'));

function CurrentComponent(){
  return(
         <div>
              <ImportedComponent />
         </div>
  );
}

इस code में React.lazy() method द्वारा ImportedComponent को dynamically import किया गया है और एक element के roop में return करवाया गया है। बाद में जिसे regular component की तरह render किया गया है।

React.lazy() function dynamic import create करने वाले function को argument के रूप में लेता है। यह import() function एक promise return करना चाहिए जो की module में एक React component के रूप में resolve होती है।

Suspense Component

कई बार ऐसा हो सकता है की import किया जाने वाला component आपके current component के render होते समय load ना हो।

ऐसी situation में उस component के load होने का wait करते हुए user को kuch fall back content जैसे की progress indicator show किया जाना चाहिए। इस कार्य के लिए Suspense component का प्रयोग किया जाता है।

<Suspense fallback="element-to-render-while-waiting">
  <ImportedComponent />
</Suspense>

जैसा की आप देख सकते है Suspense component के अंदर ImportedComponent को render करवाया गया है। Suspense component fallback prop define करता है। इस prop के रूप में आप कोई भी वह component pass कर सकते है जो आप waiting के दौरान show करना चाहते है।

जब तक ImportedComponent load नहीं होता है fallback prop में pass किया गया component render होता है। जैसे ही ImportedComponent load होता है तो fallback prop का component इसके द्वारा replace कर दिया जाता है।

Suspense component को imported component के ऊपर कहीं भी define किया जा सकता है। यह आवश्यक नहीं है की Suspense component import किए जाने वाले component के just ऊपर ही हो।

इसके अलावा एक Suspense component में आप multiple imported components render करवा सकते है।

const ImportedComponent = React.lazy(() => import('./ImportedComponent'));
const AnothImpoComponent = React.lazy(() => import('./AnothImpoComponent'));


function CurrentComponent(){
  return(
         <div>
              <ImportedComponent />
              <AnothImpoComponent />
         </div>
  );
}

Error Boundaries

यदि import किए जाने वाले component की loading किसी कारनवश fail हो जाती है तो इससे error generate होती है। ये errors bad user experience create कर सकती है। इसलिए इन errors को handle करना आवश्यक होता है।

इन errors को error boundaries के द्वारा handle किया जा सकता है और bad user experience create करने से बचा जा सकता है।

Error boundaries create करके आप उन्हें imported components के ऊपर कहीं भी use कर सकते है। ताकि जब error आए तो वह handle की जा सके।

const ImportedComponent = React.lazy(() => import('./ImportedComponent'));
const AnothImpoComponent = React.lazy(() => import('./AnothImpoComponent'));


function CurrentComponent(){
  return(
         <div>
              <MyErrorBoundry>
                <ImportedComponent />
                <AnothImpoComponent />
              </MyErrorBoundry>
         </div>
  );
}

Route Based Code Splitting

कई बार यह तय करना मुश्किल हो जाता है की code splitting कहाँ से शुरू करनी चाहिए। आपको code splitting कुछ इस प्रकार perform करनी चाहिए की modules बराबर बँट जाए और application की performance पर भी कोई प्रभाव ना पड़े।

इसके लिए routes से code splitting करना सही रहता है। एक page से दूसरे page पर जाने में कुछ समय लगता है और web में सभी लोग इसके आदि हो चुके है। इसके अलावा एक web page भी पूरा एक ही बार में load होता है। इसलिए उस बीच में user भी किसी दूसरे webpage से interact नहीं कर सकता है।

Named Exports

React में हर file से सिर्फ़ एक ही export possible है जिसे default export कहा जाता है। यदि आप किसी file से एक से अधिक components export करना चाहते तो ऐसे में named exports को use किया जाता है।

लेकिन React.lazy() function सिर्फ़ default exports को ही support करता है। इस function के द्वारा named exports को import करने के लिए आप एक intermediate module बना सकते है जो की named exports को default export के रूप में import करता है। इसके बाद आप उस intermediate module को import कर सकते है।

उदाहरण के लिए नीचे दिए गए code में दो named export components है।

// namedExport.js

export const ImportedComponent = /* component import */
export const AnoImpoComponent = /* component import */

इन named exports को import करने के लिए पहले आप इन्हें अलग अलग intermediate module में इस प्रकार default export के रूप import कर सकते है।

//ImportedComponent.js

export {ImportedComponent as default} from './namedExport.js';

इसके बाद इन्हें मुख्य file में इस प्रकार import किया जा सकता है।

const ImportedComponent = React.lazy(() => import('./ImportedComponent.js');