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

Šajā piemērā Home, About un Products komponentes tiek ielādētas slinki. Komponente Suspense nodrošina rezerves lietotāja saskarni (šajā gadījumā "Loading..."), kamēr komponentes tiek ielādētas.

Piemēra scenārijs: Iedomājieties globālu sociālo mediju platformu. Kad lietotājs pirmo reizi pieslēdzas, viņš tiek novirzīts uz savu ziņu plūsmu (Home). Kods tādām funkcijām kā lietotāju profili (About) vai tirgus laukums (Products) tiek ielādēts tikai tad, kad lietotājs pāriet uz šīm sadaļām, uzlabojot sākotnējo ielādes laiku.

Angular

Angular atbalsta moduļu slinko ielādi, izmantojot maršrutētāja konfigurāciju. Jūs varat izmantot loadChildren īpašību, lai norādītu moduli, kas jāielādē pēc pieprasījuma.

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

Šajā piemērā HomeModule, AboutModule un ProductsModule tiek ielādēti slinki, kad lietotājs pāriet uz attiecīgajiem maršrutiem.

Piemēra scenārijs: Iedomājieties daudznacionālas korporācijas iekšējo tīmekļa portālu. Dažādām nodaļām (piemēram, HR, Finanses, Mārketings) ir savi moduļi. Koda sadalīšana nodrošina, ka darbinieki lejupielādē kodu tikai tām nodaļām, ar kurām viņi mijiedarbojas, tādējādi racionalizējot ielādes procesu.

Vue.js

Vue.js atbalsta komponenšu slinko ielādi, izmantojot dinamiskos importus jūsu maršrutētāja konfigurācijā.

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

Šeit Home.vue, About.vue un Products.vue komponentes tiek ielādētas slinki, kad tiek apmeklēti to attiecīgie maršruti. Komentārs webpackChunkName palīdz Webpack izveidot atsevišķus gabalus katrai komponentei.

Piemēra scenārijs: Iedomājieties globālu tiešsaistes izglītības platformu. Kursu moduļi (piemēram, Matemātika, Vēsture, Zinātne) var tikt ielādēti pēc pieprasījuma, kad studenti tajos reģistrējas. Šī pieeja samazina sākotnējo lejupielādes apjomu un optimizē lietotāja pieredzi.

Maršrutu bāzētas koda sadalīšanas priekšrocības

• Vienkārša ieviešana: Salīdzinoši viegli uzstādīt un saprast.
• Skaidra atbildības sadale: Labi saskan ar daudzu tīmekļa aplikāciju struktūru.
• Uzlabots sākotnējās ielādes laiks: Ievērojams samazinājums sākumā ielādējamā koda apjomā.

Maršrutu bāzētas koda sadalīšanas trūkumi

• Dublēšanās potenciāls: Koplietotas komponentes vai atkarības var tikt iekļautas vairākos maršrutu gabalos, kas noved pie koda dublēšanās.
• Granularitātes ierobežojumi: Var nebūt ideāli piemērots aplikācijām ar sarežģītām komponentēm, kas tiek koplietotas vairākos maršrutos.

Komponentu bāzēta koda sadalīšana

Komponentu bāzēta koda sadalīšana ietver jūsu aplikācijas koda sadalīšanu, balstoties uz atsevišķām komponentēm, nevis veseliem maršrutiem. Tas ļauj izmantot granulārāku pieeju koda ielādei, ielādējot tikai konkrētām komponentēm nepieciešamo kodu tad, kad tās ir vajadzīgas.

Ieviešana

Komponentu bāzēta koda sadalīšana ir sarežģītāka nekā maršrutu bāzēta sadalīšana, bet piedāvā lielāku elastību un optimizācijas potenciālu. Atkal, ieviešana atšķiras atkarībā no ietvara.

React

React ietvarā jūs varat izmantot React.lazy un Suspense, lai slinki ielādētu atsevišķas komponentes maršruta vai citas komponentes ietvaros.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>