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

Ushbu misolda Home, About va Products komponentlari dangasa usulda yuklanadi. Suspense komponenti komponentlar yuklanayotgan vaqtda zaxira UI (bu holda, "Yuklanmoqda...") taqdim etadi.

Misol stsenariysi: Global ijtimoiy media platformasini tasavvur qiling. Foydalanuvchi birinchi marta tizimga kirganida, ular o'zlarining yangiliklar lentasiga (Home) yo'naltiriladi. Foydalanuvchi profillari (About) yoki bozor (Products) kabi funksiyalar uchun kod faqat foydalanuvchi ushbu bo'limlarga o'tganda yuklanadi, bu esa dastlabki yuklanish vaqtini yaxshilaydi.

Angular

Angular o'zining router konfiguratsiyasi orqali modullarni dangasa yuklashni qo'llab-quvvatlaydi. Talab bo'yicha yuklanishi kerak bo'lgan modulni belgilash uchun loadChildren xususiyatidan foydalanishingiz mumkin.

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

Ushbu misolda HomeModule, AboutModule va ProductsModule foydalanuvchi tegishli marshrutlarga o'tganda dangasa usulda yuklanadi.

Misol stsenariysi: Ko'p millatli korporatsiyaning ichki veb-portalini o'ylab ko'ring. Turli bo'limlar (masalan, Kadrlar bo'limi, Moliya, Marketing) o'z modullariga ega. Kodni bo'lish xodimlarning faqat o'zlari ishlaydigan bo'limlar uchun kodni yuklab olishini ta'minlab, yuklash jarayonini soddalashtiradi.

Vue.js

Vue.js sizning router konfiguratsiyangizda dinamik importlardan foydalanib, komponentlarni dangasa yuklashni qo'llab-quvvatlaydi.

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

Bu yerda Home.vue, About.vue va Products.vue komponentlari tegishli marshrutlarga tashrif buyurilganda dangasa usulda yuklanadi. webpackChunkName izohi Webpack-ga har bir komponent uchun alohida qismlar yaratishga yordam beradi.

Misol stsenariysi: Global onlayn ta'lim platformasini tasavvur qiling. Kurs modullari (masalan, Matematika, Tarix, Fan) talabalar ularga yozilganda talab bo'yicha yuklanishi mumkin. Bu yondashuv dastlabki yuklab olish hajmini minimallashtiradi va foydalanuvchi tajribasini optimallashtiradi.

Marshrutga Asoslangan Kodni Bo'lishning Afzalliklari

• Oddiy Amalga Oshirish: O'rnatish va tushunish nisbatan oson.
• Vazifalarning Aniq Ajratilishi: Ko'pgina veb-ilovalarning tuzilishiga yaxshi mos keladi.
• Boshlang'ich Yuklanish Vaqtining Yaxshilanishi: Oldindan yuklanadigan kod miqdorining sezilarli darajada kamayishi.

Marshrutga Asoslangan Kodni Bo'lishning Kamchiliklari

• Takrorlanish Ehtimoli: Umumiy komponentlar yoki bog'liqliklar bir nechta marshrut qismlariga kiritilishi mumkin, bu esa kodning takrorlanishiga olib keladi.
• Donadorlik Cheklovlari: Bir nechta marshrutlar bo'ylab ulashilgan murakkab komponentlarga ega ilovalar uchun ideal bo'lmasligi mumkin.

Komponentga Asoslangan Kodni Bo'lish

Komponentga asoslangan kodni bo'lish ilovangiz kodini butun marshrutlar o'rniga alohida komponentlarga asoslanib bo'lishni o'z ichiga oladi. Bu kodni yuklashga yanada donador yondashuvni ta'minlaydi, faqat kerak bo'lganda ma'lum komponentlar uchun zarur bo'lgan kodni yuklaydi.

Amalga Oshirish

Komponentga asoslangan kodni bo'lish marshrutga asoslangan bo'lishdan ko'ra murakkabroq, ammo ko'proq moslashuvchanlik va optimallashtirish imkoniyatlarini taqdim etadi. Yana bir bor, amalga oshirish freymvorkka bog'liq.

React

React-da siz marshrut yoki boshqa komponent ichidagi alohida komponentlarni dangasa yuklash uchun React.lazy va Suspense dan foydalanishingiz mumkin.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>