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

Šiame pavyzdyje Home, About ir Products komponentai įkeliami tingiai. Suspense komponentas suteikia atsarginę vartotojo sąsają (šiuo atveju „Loading...“), kol komponentai yra įkeliami.

Pavyzdinis scenarijus: Įsivaizduokite pasaulinę socialinės medijos platformą. Kai vartotojas pirmą kartą prisijungia, jis nukreipiamas į savo naujienų srautą (Home). Kodas funkcijoms, tokioms kaip vartotojo profiliai (About) ar prekyvietė (Products), įkeliamas tik tada, kai vartotojas pereina į tas skiltis, taip pagerinant pradinį įkėlimo laiką.

Angular

Angular palaiko tingųjį modulių įkėlimą per savo maršrutizatoriaus konfigūraciją. Galite naudoti loadChildren savybę, norėdami nurodyti modulį, kuris turėtų būti įkeltas pagal poreikį.

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

Šiame pavyzdyje HomeModule, AboutModule ir ProductsModule įkeliami tingiai, kai vartotojas pereina į atitinkamus maršrutus.

Pavyzdinis scenarijus: Pagalvokite apie tarptautinės korporacijos vidinį interneto portalą. Skirtingi skyriai (pvz., Žmogiškieji ištekliai, Finansai, Rinkodara) turi savo modulius. Kodo skaidymas užtikrina, kad darbuotojai atsisiunčia tik tų skyrių kodą, su kuriais jie sąveikauja, taip supaprastinant įkėlimo procesą.

Vue.js

Vue.js palaiko tingųjį komponentų įkėlimą naudojant dinaminius importus jūsų maršrutizatoriaus konfigūracijoje.

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

Čia Home.vue, About.vue ir Products.vue komponentai įkeliami tingiai, kai lankomasi jų atitinkamuose maršrutuose. webpackChunkName komentaras padeda Webpack sukurti atskiras dalis kiekvienam komponentui.

Pavyzdinis scenarijus: Įsivaizduokite pasaulinę internetinio mokymosi platformą. Kursų moduliai (pvz., Matematika, Istorija, Mokslas) gali būti įkeliami pagal poreikį, kai studentai į juos užsiregistruoja. Šis metodas sumažina pradinį atsisiuntimo dydį ir optimizuoja vartotojo patirtį.

Maršruto pagrindu pagrįsto kodo skaidymo privalumai

• Paprastas įgyvendinimas: Santykinai lengva nustatyti ir suprasti.
• Aiški atsakomybių atskirtis: Gerai dera su daugelio žiniatinklio programų struktūra.
• Pagerintas pradinis įkėlimo laikas: Ženkliai sumažinamas iš anksto įkeliamo kodo kiekis.

Maršruto pagrindu pagrįsto kodo skaidymo trūkumai

• Dubliavimo potencialas: Bendri komponentai ar priklausomybės gali būti įtrauktos į kelias maršruto dalis, o tai lemia kodo dubliavimąsi.
• Granuliarumo apribojimai: Gali būti neidealus programoms su sudėtingais komponentais, bendrinamais keliuose maršrutuose.

Komponentų pagrindu pagrįstas kodo skaidymas

Komponentų pagrindu pagrįstas kodo skaidymas apima jūsų programos kodo skaidymą pagal atskirus komponentus, o ne visus maršrutus. Tai leidžia taikyti smulkesnį kodo įkėlimo metodą, įkeliant tik kodą, reikalingą konkretiems komponentams, kai jie yra reikalingi.

Įgyvendinimas

Komponentų pagrindu pagrįstas kodo skaidymas yra sudėtingesnis nei maršruto pagrindu, tačiau suteikia didesnį lankstumą ir optimizavimo potencialą. Vėlgi, įgyvendinimas priklauso nuo karkaso.

React

React karkase galite naudoti React.lazy ir Suspense tingiam atskirų komponentų įkėlimui maršrute ar kitame komponente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>