ફ્રન્ટએન્ડ કોડ સ્પ્લિટિંગ: રૂટ-આધારિત અને કમ્પોનન્ટ-આધારિત

// 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 પ્રોપર્ટી તે મોડ્યુલનો પાથ સ્પષ્ટ કરે છે જે લેઝી લોડ થવો જોઈએ. જ્યારે વપરાશકર્તા અનુરૂપ રૂટ પર નેવિગેટ કરે ત્યારે એંગ્યુલરનો રાઉટર આપમેળે મોડ્યુલ અને તેના સંબંધિત કમ્પોનન્ટ્સ લોડ કરશે.

ઉદાહરણ (વ્યૂ.js)

વ્યૂ.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 વિકલ્પ કમ્પોનન્ટને અસુમેળ રીતે લોડ કરવા માટે ડાયનેમિક ઇમ્પોર્ટનો ઉપયોગ કરે છે. વ્યૂ રાઉટર રૂટ ઍક્સેસ કરવામાં આવે ત્યારે કમ્પોનન્ટનું લોડિંગ અને રેન્ડરિંગ હેન્ડલ કરશે.

રૂટ-આધારિત કોડ સ્પ્લિટિંગના ફાયદા

• અમલ કરવા માટે સરળ: રૂટ-આધારિત કોડ સ્પ્લિટિંગ અમલમાં મૂકવા માટે પ્રમાણમાં સીધું છે, ખાસ કરીને આધુનિક ફ્રેમવર્ક દ્વારા પૂરા પાડવામાં આવેલ સપોર્ટ સાથે.
• ચિંતાનું સ્પષ્ટ વિભાજન: દરેક રૂટ એપ્લિકેશનના અલગ વિભાગનું પ્રતિનિધિત્વ કરે છે, જેનાથી કોડ અને તેના નિર્ભરતાઓ વિશે વિચારવું સરળ બને છે.
• મોટી એપ્લિકેશનો માટે અસરકારક: રૂટ-આધારિત કોડ સ્પ્લિટિંગ ઘણી રૂટ્સ અને સુવિધાઓવાળી મોટી એપ્લિકેશનો માટે ખાસ કરીને ફાયદાકારક છે.

રૂટ-આધારિત કોડ સ્પ્લિટિંગના ગેરફાયદા

• પૂરતા ગ્રાન્યુલર ન હોઈ શકે: રૂટ-આધારિત કોડ સ્પ્લિટિંગ જટિલ કમ્પોનન્ટ્સ માટે પૂરતું ન હોઈ શકે જે બહુવિધ રૂટ્સ પર શેર કરવામાં આવે છે.
• પ્રારંભિક લોડ સમય હજુ પણ ઊંચો હોઈ શકે છે: જો રૂટમાં ઘણી નિર્ભરતાઓ હોય, તો તે રૂટ માટે પ્રારંભિક લોડ સમય હજુ પણ નોંધપાત્ર હોઈ શકે છે.

કમ્પોનન્ટ-આધારિત કોડ સ્પ્લિટિંગ

કમ્પોનન્ટ-આધારિત કોડ સ્પ્લિટિંગ વ્યક્તિગત કમ્પોનન્ટ્સના આધારે એપ્લિકેશન કોડને નાના ભાગોમાં વિભાજીત કરીને કોડ સ્પ્લિટિંગને વધુ આગળ લઈ જાય છે. આ અભિગમ કોડ લોડિંગ પર વધુ ગ્રાન્યુલર નિયંત્રણની મંજૂરી આપે છે અને જટિલ UI અને પુનઃઉપયોગી કમ્પોનન્ટ્સવાળી એપ્લિકેશનો માટે ખાસ કરીને અસરકારક બની શકે છે.

અમલીકરણ

કમ્પોનન્ટ-આધારિત કોડ સ્પ્લિટિંગ ડાયનેમિક ઇમ્પોર્ટ્સ પર પણ આધાર રાખે છે, પરંતુ સંપૂર્ણ રૂટ્સ લોડ કરવાને બદલે, વ્યક્તિગત કમ્પોનન્ટ્સ માંગ પર લોડ થાય છે. આ તકનીકોનો ઉપયોગ કરીને પ્રાપ્ત કરી શકાય છે જેમ કે:

1. લેઝી લોડિંગ કમ્પોનન્ટ્સ: કમ્પોનન્ટ્સ ફક્ત ત્યારે જ લોડ કરો જ્યારે તેમની જરૂર હોય, જેમ કે જ્યારે તેઓ પ્રથમ વખત રેન્ડર થાય અથવા જ્યારે કોઈ ચોક્કસ ઇવેન્ટ થાય ત્યારે ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ કરો.
2. શરતી રેન્ડરિંગ: વપરાશકર્તા ક્રિયાપ્રતિક્રિયા અથવા અન્ય પરિબળોના આધારે કમ્પોનન્ટ્સને શરતી રીતે રેન્ડર કરો, ફક્ત ત્યારે જ કમ્પોનન્ટ કોડ લોડ કરો જ્યારે શરત પૂરી થાય.
3. ઇન્ટરસેક્શન ઓબ્ઝર્વર API: કમ્પોનન્ટ વ્યૂપોર્ટમાં દૃશ્યમાન છે કે કેમ તે શોધવા અને તેના કોડને તે મુજબ લોડ કરવા માટે ઇન્ટરસેક્શન ઓબ્ઝર્વર API નો ઉપયોગ કરો. આ શરૂઆતમાં સ્ક્રીનની બહારના કમ્પોનન્ટ્સને લોડ કરવા માટે ખાસ ઉપયોગી છે.

ઉદાહરણ (રિએક્ટ)

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

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

function App() {
 return (
 

 Loading...
}>