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

În acest exemplu, componentele Home, About și Products sunt încărcate leneș. Componenta Suspense oferă o interfață de rezervă (în acest caz, "Loading...") în timp ce componentele sunt încărcate.

Scenariu Exemplu: Imaginați-vă o platformă globală de social media. Când un utilizator se conectează pentru prima dată, este direcționat către fluxul său de știri (Home). Codul pentru funcționalități precum profilurile de utilizator (About) sau marketplace (Products) este încărcat doar atunci când utilizatorul navighează către acele secțiuni, îmbunătățind timpul de încărcare inițial.

Angular

Angular suportă încărcarea leneșă a modulelor prin configurația sa de router. Puteți utiliza proprietatea loadChildren pentru a specifica un modul care ar trebui încărcat la cerere.

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

În acest exemplu, HomeModule, AboutModule și ProductsModule sunt încărcate leneș atunci când utilizatorul navighează către rutele respective.

Scenariu Exemplu: Gândiți-vă la portalul web intern al unei corporații multinaționale. Diferite departamente (de exemplu, Resurse Umane, Finanțe, Marketing) au propriile module. Divizarea codului asigură că angajații descarcă doar codul pentru departamentele cu care interacționează, eficientizând procesul de încărcare.

Vue.js

Vue.js suportă încărcarea leneșă a componentelor folosind importuri dinamice în configurația routerului.

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

Aici, componentele Home.vue, About.vue și Products.vue sunt încărcate leneș atunci când rutele lor respective sunt vizitate. Comentariul webpackChunkName ajută Webpack să creeze bucăți separate pentru fiecare componentă.

Scenariu Exemplu: Imaginați-vă o platformă globală de educație online. Modulele de curs (de exemplu, Matematică, Istorie, Știință) pot fi încărcate la cerere pe măsură ce studenții se înscriu la ele. Această abordare minimizează dimensiunea descărcării inițiale și optimizează experiența utilizatorului.

Beneficiile Divizării Codului Bazate pe Rute

• Implementare Simplă: Relativ ușor de configurat și de înțeles.
• Separare Clară a Responsabilităților: Se aliniază bine cu structura multor aplicații web.
• Timp de Încărcare Inițial Îmbunătățit: Reducere semnificativă a cantității de cod încărcat la început.

Dezavantajele Divizării Codului Bazate pe Rute

• Potențial de Duplicare: Componentele sau dependențele partajate ar putea fi incluse în mai multe bucăți de rută, ducând la duplicarea codului.
• Limitări de Granularitate: S-ar putea să nu fie ideală pentru aplicații cu componente complexe partajate pe mai multe rute.

Divizarea Codului Bazată pe Componente

Divizarea codului bazată pe componente implică împărțirea codului aplicației dvs. pe baza componentelor individuale, mai degrabă decât a rutelor întregi. Acest lucru permite o abordare mai granulară a încărcării codului, încărcând doar codul necesar pentru componente specifice atunci când acestea sunt necesare.

Implementare

Divizarea codului bazată pe componente este mai complexă decât cea bazată pe rute, dar oferă o flexibilitate și un potențial de optimizare mai mari. Din nou, implementarea variază în funcție de framework.

React

În React, puteți utiliza React.lazy și Suspense pentru a încărca leneș componente individuale în cadrul unei rute sau a altei componente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>