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, Finance, Marketing) પાસે તેમના પોતાના મોડ્યુલ્સ હોય છે. કોડ સ્પ્લિટિંગ ખાતરી કરે છે કે કર્મચારીઓ ફક્ત તે જ વિભાગો માટેનો કોડ ડાઉનલોડ કરે છે જેની સાથે તેઓ ક્રિયાપ્રતિક્રિયા કરે છે, જે લોડિંગ પ્રક્રિયાને સુવ્યવસ્થિત કરે છે.

વ્યુ.જેએસ

વ્યુ.જેએસ તમારા રાઉટર કન્ફિગરેશનમાં ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ કરીને કમ્પોનન્ટ્સના લેઝી લોડિંગને સપોર્ટ કરે છે.

            
// 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...
}>