ఫ్రంట్‌ఎండ్ కోడ్ స్ప్లిటింగ్: రూట్-ఆధారిత మరియు కాంపోనెంట్-ఆధారిత

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

ఉదాహరణ (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 ఎంపిక కాంపోనెంట్‌ను అసమకాలికంగా లోడ్ చేయడానికి డైనమిక్ ఇంపోర్ట్‌ను ఉపయోగిస్తుంది. రూట్‌ను యాక్సెస్ చేసినప్పుడు Vue Router కాంపోనెంట్ లోడింగ్ మరియు రెండరింగ్‌ను నిర్వహిస్తుంది.

రూట్-ఆధారిత కోడ్ స్ప్లిటింగ్ యొక్క ప్రయోజనాలు

• అమలు చేయడానికి సులభం: రూట్-ఆధారిత కోడ్ స్ప్లిటింగ్ అమలు చేయడానికి చాలా సులభం, ముఖ్యంగా ఆధునిక ఫ్రేమ్‌వర్క్‌లు అందించే మద్దతుతో.
• ఆందోళనల స్పష్టమైన విభజన: ప్రతి రూట్ అప్లికేషన్ యొక్క ప్రత్యేక విభాగాన్ని సూచిస్తుంది, కోడ్ మరియు దాని డిపెండెన్సీల గురించి స్పష్టంగా అర్థం చేసుకోవడం సులభం చేస్తుంది.
• పెద్ద అప్లికేషన్‌లకు ప్రభావవంతమైనది: రూట్-ఆధారిత కోడ్ స్ప్లిటింగ్ అనేక రూట్‌లు మరియు ఫీచర్‌లతో కూడిన పెద్ద అప్లికేషన్‌లకు ప్రత్యేకంగా ప్రయోజనకరమైనది.

రూట్-ఆధారిత కోడ్ స్ప్లిటింగ్ యొక్క అప్రయోజనాలు

• తగినంత గ్రాన్యులర్‌గా ఉండకపోవచ్చు: బహుళ రూట్‌లలో భాగస్వామ్యం చేయబడిన సంక్లిష్ట కాంపోనెంట్‌లను కలిగి ఉన్న అప్లికేషన్‌లకు రూట్-ఆధారిత కోడ్ స్ప్లిటింగ్ సరిపోకపోవచ్చు.
• ప్రారంభ లోడ్ సమయం ఇప్పటికీ ఎక్కువగా ఉండవచ్చు: ఒక రూట్‌లో అనేక డిపెండెన్సీలు ఉంటే, ఆ రూట్ యొక్క ప్రారంభ లోడ్ సమయం ఇప్పటికీ గణనీయంగా ఉండవచ్చు.

కాంపోనెంట్-ఆధారిత కోడ్ స్ప్లిటింగ్

కాంపోనెంట్-ఆధారిత కోడ్ స్ప్లిటింగ్ అనేది అప్లికేషన్ కోడ్‌ను వ్యక్తిగత కాంపోనెంట్‌ల ఆధారంగా చిన్న చంక్స్‌గా విభజించడం ద్వారా కోడ్ స్ప్లిటింగ్‌ను ఒక అడుగు ముందుకు తీసుకువెళుతుంది. ఈ విధానం కోడ్ లోడింగ్‌పై మరింత గ్రాన్యులర్ నియంత్రణను అనుమతిస్తుంది మరియు సంక్లిష్ట UIలు మరియు తిరిగి ఉపయోగించగల కాంపోనెంట్‌లను కలిగి ఉన్న అప్లికేషన్‌లకు ప్రత్యేకంగా ప్రభావవంతంగా ఉంటుంది.

అమలు

కాంపోనెంట్-ఆధారిత కోడ్ స్ప్లిటింగ్ కూడా డైనమిక్ ఇంపోర్ట్‌లపై ఆధారపడుతుంది, అయితే మొత్తం రూట్‌లను లోడ్ చేయడానికి బదులుగా, వ్యక్తిగత కాంపోనెంట్‌లు డిమాండ్‌పై లోడ్ చేయబడతాయి. దీనిని ఈ క్రింది పద్ధతులను ఉపయోగించి సాధించవచ్చు:

1. కాంపోనెంట్‌లను లేజీగా లోడ్ చేయడం: కాంపోనెంట్‌లు అవసరమైనప్పుడు మాత్రమే లోడ్ చేయడానికి డైనమిక్ ఇంపోర్ట్‌లను ఉపయోగించండి, అవి మొదటిసారి రెండర్ చేయబడినప్పుడు లేదా ఒక నిర్దిష్ట ఈవెంట్ సంభవించినప్పుడు వంటివి.
2. షరతులతో కూడిన రెండరింగ్: వినియోగదారు పరస్పర చర్య లేదా ఇతర కారకాల ఆధారంగా కాంపోనెంట్‌లను షరతులతో రెండర్ చేయండి, షరతు నెరవేరినప్పుడు మాత్రమే కాంపోనెంట్ కోడ్‌ను లోడ్ చేయండి.
3. ఇంటర్‌సెక్షన్ అబ్జర్వర్ API: ఒక కాంపోనెంట్ వ్యూపోర్ట్‌లో కనిపించినప్పుడు గుర్తించడానికి మరియు దాని కోడ్‌ను తదనుగుణంగా లోడ్ చేయడానికి ఇంటర్‌సెక్షన్ అబ్జర్వర్ APIని ఉపయోగించండి. ఇది ప్రారంభంలో స్క్రీన్ నుండి దూరంగా ఉన్న కాంపోనెంట్‌లను లోడ్ చేయడానికి ప్రత్యేకంగా ఉపయోగపడుతుంది.

ఉదాహరణ (రియాక్ట్)

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

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

function App() {
 return (
 

 Loading...
}>