Visaptverošs ceļvedis par frontend koda sadalīšanas metodēm, koncentrējoties uz maršrutu un komponentu pieejām veiktspējas un lietotāja pieredzes uzlabošanai.
Frontend koda sadalīšana: balstīta uz maršrutiem un balstīta uz komponentiem
Mūsdienu tīmekļa izstrādes jomā ātras un atsaucīgas lietotāja pieredzes nodrošināšana ir vissvarīgākā. Pieaugot lietojumprogrammu sarežģītībai, JavaScript paku izmērs var ievērojami palielināties, izraisot ilgāku sākotnējo ielādes laiku un gausu lietotāja pieredzi. Koda sadalīšana ir spēcīga metode šīs problēmas risināšanai, sadalot lietojumprogrammas kodu mazākās, vieglāk pārvaldāmās daļās, ko var ielādēt pēc pieprasījuma.
Šis ceļvedis pēta divas galvenās frontend koda sadalīšanas stratēģijas: balstīta uz maršrutiem un balstīta uz komponentiem. Mēs iedziļināsimies katras pieejas principos, apspriedīsim to priekšrocības un trūkumus, kā arī sniegsim praktiskus piemērus to ieviešanas ilustrēšanai.
Kas ir koda sadalīšana?
Koda sadalīšana ir monolīta JavaScript saišķa sadalīšana mazākos saišķos vai daļās. Tā vietā, lai sākotnēji ielādētu visu lietojumprogrammas kodu, tiek ielādēts tikai nepieciešamais kods pašreizējam skatam vai komponentam. Tas samazina sākotnējo lejupielādes apjomu, kas nodrošina ātrāku lapas ielādes laiku un uzlabotu uztverto veiktspēju.
Koda sadalīšanas galvenās priekšrocības ir:
- Uzlabots sākotnējais ielādes laiks: Mazāki sākotnējie saišķu izmēri nodrošina ātrāku ielādes laiku un labāku pirmo iespaidu lietotājiem.
- Samazināts parsēšanas un kompilēšanas laiks: Pārlūkprogrammas mazāk laika patērē mazāku saišķu parsēšanai un kompilēšanai, kā rezultātā notiek ātrāka atveide.
- Uzlabota lietotāja pieredze: Ātrāks ielādes laiks veicina vienmērīgāku un atsaucīgāku lietotāja pieredzi.
- Optimizēta resursu izmantošana: Tiek ielādēts tikai nepieciešamais kods, saglabājot joslas platumu un ierīces resursus.
Koda sadalīšana, balstoties uz maršrutiem
Koda sadalīšana, balstoties uz maršrutiem, ietver lietojumprogrammas koda sadalīšanu, pamatojoties uz lietojumprogrammas maršrutiem vai lapām. Katrs maršruts atbilst atsevišķai koda daļai, kas tiek ielādēta tikai tad, kad lietotājs pārvietojas uz šo maršrutu. Šī pieeja ir īpaši efektīva lietojumprogrammām ar atsevišķām sadaļām vai funkcijām, kurām netiek bieži piekļūts.
Ieviešana
Mūsdienu JavaScript ietvari, piemēram, React, Angular un Vue, nodrošina iebūvētu atbalstu koda sadalīšanai, balstoties uz maršrutiem, bieži izmantojot dinamiskas importēšanas iespējas. Lūk, kā tas darbojas konceptuāli:
- Definēt maršrutus: Definējiet lietojumprogrammas maršrutus, izmantojot maršrutēšanas bibliotēku, piemēram, React Router, Angular Router vai Vue Router.
- Izmantot dinamiskas importēšanas iespējas: Tā vietā, lai importētu komponentus tieši, izmantojiet dinamiskas importēšanas iespējas (
import()), lai tos asinhroni ielādētu, kad tiek aktivizēts atbilstošais maršruts. - Konfigurēt būvēšanas rīku: Konfigurējiet savu būvēšanas rīku (piemēram, webpack, Parcel, Rollup), lai atpazītu dinamiskas importēšanas iespējas un izveidotu atsevišķas daļas katram maršrutam.
Piemērs (React ar React Router)
Apsveriet vienkāršu React lietojumprogrammu ar diviem maršrutiem: /home un /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 (
Ielādē... Šajā piemērā Home un About komponenti tiek ielādēti slinki, izmantojot React.lazy() un dinamiskas importēšanas iespējas. Suspense komponents nodrošina rezerves lietotāja interfeisu, kamēr komponenti tiek ielādēti. React Router apstrādā navigāciju un nodrošina, ka tiek atveidots pareizais komponents, pamatojoties uz pašreizējo maršrutu.
Piemērs (Angular)
Angular sistēmā koda sadalīšana, balstoties uz maršrutiem, tiek panākta, izmantojot slinki ielādētus moduļus.
// 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 { }
Šeit loadChildren īpašība maršruta konfigurācijā norāda ceļu uz moduli, kas jāslinko ielādēt. Angular maršrutētājs automātiski ielādēs moduli un ar to saistītos komponentus tikai tad, kad lietotājs pārvietosies uz atbilstošo maršrutu.
Piemērs (Vue.js)
Vue.js atbalsta arī koda sadalīšanu, balstoties uz maršrutiem, izmantojot dinamiskas importēšanas iespējas maršrutētāja konfigurācijā.
// 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;
Maršruta konfigurācijas opcija component izmanto dinamisko importēšanu, lai asinhroni ielādētu komponentu. Vue Router apstrādās komponenta ielādi un atveidi, kad tiks piekļūts maršrutam.
Koda sadalīšanas, balstoties uz maršrutiem, priekšrocības
- Vienkārša ieviešana: Koda sadalīšana, balstoties uz maršrutiem, ir salīdzinoši vienkārši ieviešama, īpaši ar moderno ietvaru atbalstu.
- Skaidra atbildības nodalīšana: Katrs maršruts atspoguļo atsevišķu lietojumprogrammas sadaļu, padarot vieglu koda un tā atkarību izpratni.
- Efektīva lielām lietojumprogrammām: Koda sadalīšana, balstoties uz maršrutiem, ir īpaši noderīga lielām lietojumprogrammām ar daudziem maršrutiem un funkcijām.
Koda sadalīšanas, balstoties uz maršrutiem, trūkumi
- Var nebūt pietiekami detalizēta: Koda sadalīšana, balstoties uz maršrutiem, var nebūt pietiekama lietojumprogrammām ar sarežģītiem komponentiem, kas tiek koplietoti vairākos maršrutos.
- Sākotnējais ielādes laiks joprojām var būt liels: Ja maršruts satur daudzas atkarības, šī maršruta sākotnējais ielādes laiks joprojām var būt ievērojams.
Koda sadalīšana, balstoties uz komponentiem
Koda sadalīšana, balstoties uz komponentiem, koda sadalīšanu paceļ soli tālāk, sadalot lietojumprogrammas kodu mazākās daļās, pamatojoties uz atsevišķiem komponentiem. Šī pieeja nodrošina detalizētāku kontroli pār koda ielādi un var būt īpaši efektīva lietojumprogrammām ar sarežģītiem lietotāja interfeisiem un atkārtoti izmantojamiem komponentiem.
Ieviešana
Koda sadalīšana, balstoties uz komponentiem, arī balstās uz dinamiskām importēšanas iespējām, taču tā vietā, lai ielādētu veselus maršrutus, atsevišķi komponenti tiek ielādēti pēc pieprasījuma. To var panākt, izmantojot tādas metodes kā:
- Slinka komponentu ielāde: Izmantojiet dinamiskas importēšanas iespējas, lai ielādētu komponentus tikai tad, kad tie ir nepieciešami, piemēram, kad tie tiek atveidoti pirmo reizi vai kad notiek noteikts notikums.
- Nosacīta atveide: Atveidojiet komponentus nosacīti, pamatojoties uz lietotāja mijiedarbību vai citiem faktoriem, ielādējot komponenta kodu tikai tad, kad nosacījums ir izpildīts.
- Intersection Observer API: Izmantojiet Intersection Observer API, lai noteiktu, kad komponents ir redzams skata logā, un attiecīgi ielādētu tā kodu. Tas ir īpaši noderīgi komponentu ielādei, kas sākotnēji atrodas ārpus ekrāna.
Piemērs (React)
import React, { Suspense, lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
Ielādē... }>