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) వంటి ఫీచర్ల కోడ్ వినియోగదారు ఆ విభాగాలకు నావిగేట్ చేసినప్పుడు మాత్రమే లోడ్ చేయబడుతుంది, ఇది ప్రారంభ లోడ్ సమయాన్ని మెరుగుపరుస్తుంది.

యాంగ్యులర్

యాంగ్యులర్ దాని రూటర్ కాన్ఫిగరేషన్ ద్వారా మాడ్యూళ్ల లేజీ లోడింగ్‌కు మద్దతు ఇస్తుంది. డిమాండ్‌పై లోడ్ చేయవలసిన మాడ్యూల్‌ను పేర్కొనడానికి మీరు 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 వినియోగదారు వారి సంబంధిత రూట్‌లకు నావిగేట్ చేసినప్పుడు లేజీగా లోడ్ చేయబడతాయి.

ఉదాహరణ దృశ్యం: ఒక బహుళజాతి కార్పొరేషన్ యొక్క అంతర్గత వెబ్ పోర్టల్‌ను ఆలోచించండి. వివిధ విభాగాలు (ఉదా., HR, ఫైనాన్స్, మార్కెటింగ్) వారి స్వంత మాడ్యూళ్లను కలిగి ఉంటాయి. కోడ్ స్ప్లిటింగ్ ఉద్యోగులు వారు ఇంటరాక్ట్ అయ్యే విభాగాల కోడ్‌ను మాత్రమే డౌన్‌లోడ్ చేసుకునేలా చేస్తుంది, లోడింగ్ ప్రక్రియను క్రమబద్ధీకరిస్తుంది.

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.lazy మరియు Suspenseను ఉపయోగించవచ్చు.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>