Põhjalik juhend frontend-koodi tükeldamise tehnikatest, keskendudes marsruudi- ja komponendipõhistele lähenemistele parema jõudluse ja kasutuskogemuse saavutamiseks.
Frontend-koodi tükeldamine: marsruudi- ja komponendipõhine
Kaasaegse veebiarenduse valdkonnas on kiire ja reageeriva kasutuskogemuse pakkumine esmatähtis. Rakenduste keerukuse kasvades võib JavaScripti pakettide suurus paisuda, mis toob kaasa pikemad esmased laadimisajad ja loidu kasutuskogemuse. Koodi tükeldamine (code splitting) on võimas tehnika selle probleemi lahendamiseks, jagades rakenduse koodi väiksemateks, paremini hallatavateks tükkideks, mida saab nõudmisel laadida.
See juhend uurib kahte peamist strateegiat frontend-koodi tükeldamiseks: marsruudi- ja komponendipõhist. Süveneme iga lähenemise põhimõtetesse, arutame nende eeliseid ja puudusi ning toome praktilisi näiteid nende rakendamise illustreerimiseks.
Mis on koodi tükeldamine?
Koodi tükeldamine on praktika, mille käigus jagatakse monoliitne JavaScripti pakett väiksemateks pakettideks või tükkideks. Selle asemel, et kogu rakenduse kood kohe alguses laadida, laaditakse ainult hetkel kuvatava vaate või komponendi jaoks vajalik kood. See vähendab esialgset allalaadimise mahtu, mis omakorda lühendab lehe laadimisaega ja parandab tajutavat jõudlust.
Koodi tükeldamise peamised eelised on järgmised:
- Parem esmane laadimisaeg: Väiksemad esialgsed paketid tähendavad kiiremat laadimisaega ja paremat esmamuljet kasutajatele.
- Vähenenud parsimis- ja kompileerimisaeg: Brauserid kulutavad vähem aega väiksemate pakettide parsimisele ja kompileerimisele, mis tulemuseks on kiirem renderdamine.
- Täiustatud kasutuskogemus: Kiiremad laadimisajad aitavad kaasa sujuvamale ja reageerivamale kasutuskogemusele.
- Optimeeritud ressursikasutus: Laaditakse ainult vajalik kood, säästes ribalaiust ja seadme ressursse.
Marsruudipõhine koodi tükeldamine
Marsruudipõhine koodi tükeldamine hõlmab rakenduse koodi jagamist vastavalt rakenduse marsruutidele või lehtedele. Iga marsruut vastab eraldi kooditükile, mis laaditakse alles siis, kui kasutaja sellele marsruudile navigeerib. See lähenemine on eriti tõhus rakenduste puhul, millel on selgelt eristatavad osad või funktsioonid, mida sageli ei kasutata.
Rakendamine
Kaasaegsed JavaScripti raamistikud nagu React, Angular ja Vue pakuvad sisseehitatud tuge marsruudipõhiseks koodi tükeldamiseks, kasutades sageli dünaamilisi importimisi. Kontseptuaalselt töötab see järgmiselt:
- Määratle marsruudid: Määratle rakenduse marsruudid, kasutades marsruutimise teeki nagu React Router, Angular Router või Vue Router.
- Kasuta dünaamilisi importimisi: Komponentide otse importimise asemel kasuta dünaamilisi importimisi (
import()), et neid asünkroonselt laadida, kui vastav marsruut aktiveeritakse. - Seadista ehitustööriist: Seadista oma ehitustööriist (nt webpack, Parcel, Rollup) dünaamilisi importimisi ära tundma ja iga marsruudi jaoks eraldi tükke looma.
Näide (React koos React Routeriga)
Vaatleme lihtsat Reacti rakendust kahe marsruudiga: /home ja /about.
// 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 (
Laen... Selles näites laaditakse komponendid Home ja About laisalt, kasutades React.lazy() ja dünaamilisi importimisi. Komponent Suspense pakub varu-UI-d, kuni komponente laaditakse. React Router tegeleb navigeerimisega ja tagab, et vastavalt praegusele marsruudile renderdatakse õige komponent.
Näide (Angular)
Angularis saavutatakse marsruudipõhine koodi tükeldamine laisalt laetavate moodulite abil.
// 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 { }
Siin määrab marsruudi konfiguratsioonis olev omadus loadChildren tee moodulini, mida tuleks laisalt laadida. Angulari marsruuter laadib mooduli ja sellega seotud komponendid automaatselt alles siis, kui kasutaja navigeerib vastavale marsruudile.
Näide (Vue.js)
Ka Vue.js toetab marsruudipõhist koodi tükeldamist, kasutades dünaamilisi importimisi marsruuteri konfiguratsioonis.
// 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;
Marsruudi konfiguratsioonis olev valik component kasutab dünaamilist importi komponendi asünkroonseks laadimiseks. Vue Router tegeleb komponendi laadimise ja renderdamisega, kui marsruudile juurde pääsetakse.
Marsruudipõhise koodi tükeldamise eelised
- Lihtne rakendada: Marsruudipõhist koodi tükeldamist on suhteliselt lihtne rakendada, eriti kaasaegsete raamistike pakutava toega.
- Selge vastutusalade eraldamine: Iga marsruut esindab rakenduse eraldiseisvat osa, mis muudab koodi ja selle sõltuvuste mõistmise lihtsaks.
- Tõhus suurte rakenduste puhul: Marsruudipõhine koodi tükeldamine on eriti kasulik suurte, paljude marsruutide ja funktsioonidega rakenduste puhul.
Marsruudipõhise koodi tükeldamise puudused
- Ei pruugi olla piisavalt detailne: Marsruudipõhine koodi tükeldamine ei pruugi olla piisav rakenduste puhul, millel on keerulised komponendid, mida jagatakse mitme marsruudi vahel.
- Esmane laadimisaeg võib endiselt olla pikk: Kui marsruut sisaldab palju sõltuvusi, võib selle marsruudi esmane laadimisaeg siiski olla märkimisväärne.
Komponendipõhine koodi tükeldamine
Komponendipõhine koodi tükeldamine viib koodi tükeldamise sammu võrra edasi, jagades rakenduse koodi väiksemateks tükkideks, mis põhinevad üksikutel komponentidel. See lähenemine võimaldab koodi laadimise üle granulaarsemat kontrolli ja võib olla eriti tõhus keeruliste kasutajaliideste ja korduvkasutatavate komponentidega rakenduste puhul.
Rakendamine
Ka komponendipõhine koodi tükeldamine tugineb dünaamilistele importimistele, kuid tervete marsruutide laadimise asemel laaditakse üksikud komponendid nõudmisel. Seda saab saavutada selliste tehnikate abil nagu:
- Komponentide laisk laadimine: Kasuta dünaamilisi importimisi komponentide laadimiseks ainult siis, kui neid on vaja, näiteks kui neid renderdatakse esimest korda või kui toimub konkreetne sündmus.
- Tingimuslik renderdamine: Renderda komponente tingimuslikult vastavalt kasutaja interaktsioonile või muudele teguritele, laadides komponendi koodi alles siis, kui tingimus on täidetud.
- Intersection Observer API: Kasuta Intersection Observer API-t, et tuvastada, millal komponent on vaateaknas nähtav, ja laadida selle kood vastavalt. See on eriti kasulik komponentide laadimiseks, mis on algselt ekraanivälised.
Näide (React)
import React, { Suspense, lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
Laen... }>