Kuten aiemmin mainittiin, meidän täytyy tuoda ne komponentit, jotka renderöidään, kun käyttäjä siirtyy tiettyihin polkuihin sovelluksessamme. Tämän saavuttamiseksi käytämme React-kirjaston lazy-funktiota.

lazy-funktion syntaksi komponentin tuomiseksi on seuraava:

import { lazy } from 'react';

const View = lazy(() => import('./View.js'));

Tässä on selitys syntaksin jokaisesta osasta:

• Rivi 1: Tuo lazy-funktion React-kirjastosta. Tämä funktio mahdollistaa koodin jakamisen ja komponenttien laiskan lataamisen;
• Rivi 3: Määrittelee muuttujan (View tässä tapauksessa) käyttäen lazy-funktiota. lazy ottaa argumenttina funktion, joka palauttaa dynaamisen import-lauseen. Import-lause tuo määritellyn tiedoston/moduleen (tässä tapauksessa View.js) asynkronisesti käyttäen import-avainsanaa. Käärittämällä import-lauseen lazy-funktion sisään mahdollistetaan View.js-komponentin laiska lataus.

Esimerkki

Sovelletaan tätä käsitettä projektiimme tuomalla komponentit eri näkymille. Näihin näkymiin kuuluvat etusivu, tietosivu ja yhteystiedot-sivu. On tärkeää huomata, että nämä näkymät on jo luotu, ja nykyinen tehtävämme on hyödyntää niitä reitityksessä:

import { lazy } from "react";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

Käytämme React-kirjaston lazy-funktiota tuodaksemme komponentit eri näkymille. Jokainen komponentti tuodaan dynaamisesti import-lauseella, ja määrittelemme komponenttitiedostojen suhteelliset polut (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Tuomalla nämä komponentit laiskan latauksen avulla varmistetaan, että ne ladataan vain tarvittaessa, mikä edistää tehokkaampaa ja responsiivisempaa käyttökokemusta.