फ्रंटएंड कोड स्प्लिटिंग: रूट-आधारित और कंपोनेंट-आधारित

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

इस उदाहरण में, Home और About कंपोनेंट्स को React.lazy() और डायनेमिक इम्पोर्ट का उपयोग करके आलस्यपूर्वक (lazily) लोड किया जाता है। Suspense कंपोनेंट एक फॉलबैक UI प्रदान करता है, जबकि कंपोनेंट्स लोड हो रहे होते हैं। रिएक्ट राउटर नेविगेशन को संभालता है और यह सुनिश्चित करता है कि वर्तमान रूट के आधार पर सही कंपोनेंट रेंडर हो।

उदाहरण (एंगुलर)

एंगुलर में, रूट-आधारित कोड स्प्लिटिंग लेज़ी-लोडेड मॉड्यूल का उपयोग करके प्राप्त की जाती है।

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

यहां, रूट कॉन्फ़िगरेशन में loadChildren प्रॉपर्टी उस मॉड्यूल का पाथ निर्दिष्ट करती है जिसे आलस्यपूर्वक (lazily) लोड किया जाना चाहिए। एंगुलर का राउटर स्वचालित रूप से मॉड्यूल और उसके संबंधित कंपोनेंट्स को तभी लोड करेगा जब उपयोगकर्ता संबंधित रूट पर नेविगेट करेगा।

उदाहरण (Vue.js)

Vue.js राउटर कॉन्फ़िगरेशन में डायनेमिक इम्पोर्ट का उपयोग करके रूट-आधारित कोड स्प्लिटिंग का भी समर्थन करता है।

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

रूट कॉन्फ़िगरेशन में component विकल्प कंपोनेंट को एसिंक्रोनस रूप से लोड करने के लिए एक डायनेमिक इम्पोर्ट का उपयोग करता है। व्यू राउटर रूट एक्सेस होने पर कंपोनेंट की लोडिंग और रेंडरिंग को हैंडल करेगा।

रूट-आधारित कोड स्प्लिटिंग के लाभ

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

रूट-आधारित कोड स्प्लिटिंग की कमियां

• पर्याप्त दानेदार नहीं हो सकता है: रूट-आधारित कोड स्प्लिटिंग उन अनुप्रयोगों के लिए पर्याप्त नहीं हो सकती है जिनमें जटिल कंपोनेंट होते हैं जो कई रूट्स में साझा किए जाते हैं।
• प्रारंभिक लोड समय अभी भी अधिक हो सकता है: यदि किसी रूट में कई निर्भरताएँ हैं, तो उस रूट के लिए प्रारंभिक लोड समय अभी भी महत्वपूर्ण हो सकता है।

कंपोनेंट-आधारित कोड स्प्लिटिंग

कंपोनेंट-आधारित कोड स्प्लिटिंग व्यक्तिगत कंपोनेंट्स के आधार पर एप्लिकेशन कोड को छोटे-छोटे हिस्सों में विभाजित करके कोड स्प्लिटिंग को एक कदम आगे ले जाती है। यह दृष्टिकोण कोड लोडिंग पर अधिक दानेदार नियंत्रण की अनुमति देता है और जटिल यूआई और पुन: प्रयोज्य कंपोनेंट्स वाले अनुप्रयोगों के लिए विशेष रूप से प्रभावी हो सकता है।

कार्यान्वयन

कंपोनेंट-आधारित कोड स्प्लिटिंग भी डायनेमिक इम्पोर्ट पर निर्भर करती है, लेकिन पूरे रूट्स को लोड करने के बजाय, व्यक्तिगत कंपोनेंट्स को मांग पर लोड किया जाता है। यह निम्नलिखित जैसी तकनीकों का उपयोग करके प्राप्त किया जा सकता है:

1. कंपोनेंट्स को लेज़ी लोड करना: कंपोनेंट्स को केवल तभी लोड करने के लिए डायनेमिक इम्पोर्ट का उपयोग करें जब उनकी आवश्यकता हो, जैसे कि जब वे पहली बार रेंडर होते हैं या जब कोई विशिष्ट घटना होती है।
2. सशर्त रेंडरिंग: उपयोगकर्ता की बातचीत या अन्य कारकों के आधार पर कंपोनेंट्स को सशर्त रूप से रेंडर करें, कंपोनेंट कोड को केवल तभी लोड करें जब शर्त पूरी हो।
3. Intersection Observer API: यह पता लगाने के लिए Intersection Observer API का उपयोग करें कि कोई कंपोनेंट व्यूपोर्ट में कब दिखाई देता है और उसके अनुसार उसका कोड लोड करें। यह उन कंपोनेंट्स को लोड करने के लिए विशेष रूप से उपयोगी है जो शुरू में ऑफ-स्क्रीन होते हैं।

उदाहरण (रिएक्ट)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>