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 കമ്പോണന്റ്, കമ്പോണന്റുകൾ ലോഡ് ചെയ്യുമ്പോൾ ഒരു ഫാൾബാക്ക് യുഐ (ഈ സാഹചര്യത്തിൽ, "Loading...") നൽകുന്നു.

ഉദാഹരണ സാഹചര്യം: ഒരു ആഗോള സോഷ്യൽ മീഡിയ പ്ലാറ്റ്ഫോം സങ്കൽപ്പിക്കുക. ഒരു ഉപയോക്താവ് ആദ്യമായി ലോഗിൻ ചെയ്യുമ്പോൾ, അവരെ അവരുടെ ന്യൂസ് ഫീഡിലേക്ക് (Home) നയിക്കുന്നു. ഉപയോക്തൃ പ്രൊഫൈലുകൾ (About) അല്ലെങ്കിൽ മാർക്കറ്റ്പ്ലേസ് (Products) പോലുള്ള ഫീച്ചറുകൾക്കുള്ള കോഡ് ഉപയോക്താവ് ആ വിഭാഗങ്ങളിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ മാത്രം ലോഡ് ചെയ്യപ്പെടുന്നു, ഇത് പ്രാരംഭ ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നു.

ആംഗുലർ

ആംഗുലർ അതിന്റെ റൂട്ടർ കോൺഫിഗറേഷൻ വഴി മൊഡ്യൂളുകളുടെ ലേസി ലോഡിംഗിനെ പിന്തുണയ്ക്കുന്നു. ആവശ്യാനുസരണം ലോഡ് ചെയ്യേണ്ട ഒരു മൊഡ്യൂൾ വ്യക്തമാക്കാൻ നിങ്ങൾക്ക് 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 എന്നിവ ഉപയോക്താവ് അതത് റൂട്ടുകളിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ലേസിയായി ലോഡ് ചെയ്യപ്പെടുന്നു.

ഉദാഹരണ സാഹചര്യം: ഒരു ബഹുരാഷ്ട്ര കോർപ്പറേഷന്റെ ആന്തരിക വെബ് പോർട്ടലിനെക്കുറിച്ച് ചിന്തിക്കുക. വ്യത്യസ്ത വകുപ്പുകൾക്ക് (ഉദാ. എച്ച്ആർ, ഫിനാൻസ്, മാർക്കറ്റിംഗ്) അവരുടേതായ മൊഡ്യൂളുകളുണ്ട്. കോഡ് സ്പ്ലിറ്റിംഗ് ജീവനക്കാർ അവർ ഇടപഴകുന്ന വകുപ്പുകളുടെ കോഡ് മാത്രം ഡൗൺലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് ലോഡിംഗ് പ്രക്രിയ കാര്യക്ഷമമാക്കുന്നു.

വ്യൂ.ജെഎസ്

വ്യൂ.ജെഎസ് നിങ്ങളുടെ റൂട്ടർ കോൺഫിഗറേഷനിൽ ഡൈനാമിക് ഇമ്പോർട്ടുകൾ ഉപയോഗിച്ച് കമ്പോണന്റുകളുടെ ലേസി ലോഡിംഗിനെ പിന്തുണയ്ക്കുന്നു.

            
// 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.lazy, Suspense എന്നിവ ഉപയോഗിക്കാം.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>