Frontend Kodni Bo'laklash: Marshrut-Asoslangan va Komponent-Asoslangan

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

Ushbu misolda, Home va About komponentlari React.lazy() va dinamik importlardan foydalanib lazy tarzda yuklanadi. Suspense komponenti komponentlar yuklanayotganda kutish rejimida UI taqdim etadi. React Router navigatsiyani boshqaradi va joriy marshrutga qarab to'g'ri komponent render qilinishini ta'minlaydi.

Misol (Angular)

Angularda marshrut-asoslangan kodni bo'laklash lazy-yuklanadigan modullar yordamida amalga oshiriladi.

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

Bu yerda, marshrut konfiguratsiyasidagi loadChildren xususiyati lazy tarzda yuklanishi kerak bo'lgan modulning yo'lini ko'rsatadi. Agar foydalanuvchi mos keladigan marshrutga o'tsa, Angular router avtomatik ravishda modulni va unga bog'liq komponentlarni yuklaydi.

Misol (Vue.js)

Vue.js ham router konfiguratsiyasida dinamik importlardan foydalangan holda marshrut-asoslangan kodni bo'laklashni qo'llab-quvvatlaydi.

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

Marshrut konfiguratsiyasidagi component opsiyasi komponentni asinxron tarzda yuklash uchun dinamik importdan foydalanadi. Vue Router komponentga kirishda uni yuklash va renderlashni boshqaradi.

Marshrut-Asoslangan Kodni Bo'laklashning Afzalliklari

• Amalga oshirish oson: Marshrut-asoslangan kodni bo'laklashni amalga oshirish nisbatan sodda, ayniqsa zamonaviy freymvorklar tomonidan taqdim etilgan qo'llab-quvvatlash bilan.
• Vazifalarni aniq ajratish: Har bir marshrut ilovaning alohida qismini ifodalaydi, bu kod va uning bog'liqliklarini tushunishni osonlashtiradi.
• Katta ilovalar uchun samarali: Marshrut-asoslangan kodni bo'laklash ko'p marshrutlar va xususiyatlarga ega katta ilovalar uchun ayniqsa foydalidir.

Marshrut-Asoslangan Kodni Bo'laklashning Kamchiliklari

• Yetarli darajada mayda bo'lmasligi mumkin: Bir nechta marshrutlar bo'ylab almashiladigan murakkab komponentlarga ega ilovalar uchun marshrut-asoslangan kodni bo'laklash yetarli bo'lmasligi mumkin.
• Dastlabki yuklash vaqti hali ham yuqori bo'lishi mumkin: Agar marshrut ko'p bog'liqliklarni o'z ichiga olsa, o'sha marshrut uchun dastlabki yuklash vaqti hali ham sezilarli bo'lishi mumkin.

Komponent-Asoslangan Kodni Bo'laklash

Komponent-asoslangan kodni bo'laklash kodni bo'laklashni bir qadam oldinga olib boradi, chunki u alohida komponentlarga qarab ilova kodini kichikroq qismlarga bo'ladi. Bu yondashuv kodni yuklash ustidan ko'proq mayda nazoratni ta'minlaydi va murakkab UI va qayta ishlatiladigan komponentlarga ega ilovalar uchun ayniqsa samarali bo'lishi mumkin.

Amalga Oshirish

Komponent-asoslangan kodni bo'laklash ham dinamik importlarga tayanadi, lekin butun marshrutlarni yuklash o'rniga, alohida komponentlar talab bo'yicha yuklanadi. Bu quyidagi kabi usullardan foydalangan holda amalga oshirilishi mumkin:

1. Komponentlarni lazy tarzda yuklash: Komponentlar faqat ularga kerak bo'lganda, masalan, birinchi marta render qilinganda yoki ma'lum bir hodisa yuz berganda, ularni yuklash uchun dinamik importlardan foydalaning.
2. Shartli renderlash: Foydalanuvchi interfeysi yoki boshqa omillarga qarab komponentlarni shartli ravishda renderlang, faqat shart bajarilganda komponent kodini yuklang.
3. Intersection Observer API: Komponentning ko'rinadigan qismga kirib kelganini aniqlash va shunga mos ravishda kodini yuklash uchun Intersection Observer API dan foydalaning. Bu, ayniqsa, dastlab ko'rinmaydigan komponentlarni yuklash uchun foydalidir.

Misol (React)

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

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

function App() {
 return (
 

 Loading...
}>