import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

function App() {
  return (
    
      Loading...

इस उदाहरण में, Home, About, और Products कंपोनेंट्स लेज़ी-लोडेड हैं। Suspense कंपोनेंट एक फॉलबैक UI (इस मामले में, "Loading...") प्रदान करता है, जब तक कि कंपोनेंट लोड हो रहे होते हैं।

उदाहरण परिदृश्य: एक वैश्विक सोशल मीडिया प्लेटफॉर्म की कल्पना करें। जब कोई उपयोगकर्ता पहली बार लॉग इन करता है, तो उसे उनके न्यूज़ फीड (Home) पर निर्देशित किया जाता है। उपयोगकर्ता प्रोफाइल (About) या मार्केटप्लेस (Products) जैसी सुविधाओं के लिए कोड केवल तभी लोड होता है जब उपयोगकर्ता उन अनुभागों पर नेविगेट करता है, जिससे प्रारंभिक लोड समय में सुधार होता है।

Angular

Angular अपने राउटर कॉन्फ़िगरेशन के माध्यम से मॉड्यूल की लेज़ी लोडिंग का समर्थन करता है। आप loadChildren प्रॉपर्टी का उपयोग करके एक मॉड्यूल निर्दिष्ट कर सकते हैं जिसे मांग पर लोड किया जाना चाहिए।

            
// 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) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

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

            

              
                Copy
              
            
          

इस उदाहरण में, HomeModule, AboutModule, और ProductsModule तब लेज़ी लोड होते हैं जब उपयोगकर्ता उनके संबंधित रूट पर नेविगेट करता है।

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

Vue.js

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

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

यहां, Home.vue, About.vue, और Products.vue कंपोनेंट्स तब लेज़ी लोड होते हैं जब उनके संबंधित रूट पर जाया जाता है। webpackChunkName कमेंट वेबपैक को प्रत्येक कंपोनेंट के लिए अलग-अलग चंक बनाने में मदद करता है।

उदाहरण परिदृश्य: एक वैश्विक ऑनलाइन शिक्षा प्लेटफॉर्म की कल्पना करें। पाठ्यक्रम मॉड्यूल (जैसे, गणित, इतिहास, विज्ञान) को मांग पर लोड किया जा सकता है जब छात्र उनमें दाखिला लेते हैं। यह दृष्टिकोण प्रारंभिक डाउनलोड आकार को कम करता है और उपयोगकर्ता अनुभव को अनुकूलित करता है।

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

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

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

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

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

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

कार्यान्वयन

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

React

React में, आप एक रूट या अन्य कंपोनेंट के भीतर अलग-अलग कंपोनेंट्स को लेज़ी लोड करने के लिए React.lazy और Suspense का उपयोग कर सकते हैं।

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>