Kod Parçalanması

Paketləmə

Bir çox React applikasiyalarında, faylları Webpack, Rollup və ya Browserify kimi alətlər ilə paketləriylər. Paketləmə (bundling) import olunan faylların izlənməsi və “bundle” adlanan bir fayla birləşdirilməsidir. Bu fayl bütün applikasiyanı saytda bir dəfəyə yükləmək üçün istifadə edilə bilər.

Nümunə

Applikasiya:

// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42
// math.js
export function add(a, b) {
  return a + b;
}

Paket:

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

Qeyd:

Sizin paketləriniz yuxarıdankından çox fərqli olacaq.

Əgər siz Create React App, Next.js, Gatsby və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq.

Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz qoşmalısınız. Misal üçün, Webpack sənədlərində İnstalyasiyaBaşlamaq təlimatlarına baxın.

Kod Parçalanması

Paketləmə əladır amma sizin applikasiyanız böyüdükcə paket də böyüyəcək, xüsusəndə böyük ölçülü üçüncü tərəf kitabxanalardan istifadə edildikdə. Təsadüfən paketin ölçüsünü böyüdüb applikasiyanın yüklənməsi zamanını artırmamaq üçün paketə import etdiyiniz kodlara fikir verin.

Böyük paket ilə qalmamaq üçün öncədən problemin üstünə düşub paketi “parçalamağa” başlaya bilərsiniz. Webpack,Rollup və Browserify (factor-bundle ilə) kimi paketləmə alətlərinin dəstəklədiyi, bir çox paketlərin yaranıb icra zamanı dinamik formada yüklənməsi xüsusiyyəti Kod Parçalanması adlanır.

Kod Parçalanması sizin applikasiyanızda istifadəçiyə hal-hazırda lazım olanları “lazy-load” etməyə kömək edir. Bu sizin applikasiyanızın performansını dramatik şəkildə təkminləşdirir. Siz applikasiyada bütün kodun həcmini azalatmasanız da, istifadəçinin işlətməyəcəyi hissələrin yüklənmənməsini qabağını alır bə ilk yüklənən kodun həcmini azaltmış olursunuz.

import()

Kod Parçalanmasını applikasiyanıza əlavə etməyin ən yaxşı yolu dinamik import() sintaksisindən istifadə etməkdir.

Əvvəl:

import { add } from './math';

console.log(add(16, 26));

Sonra:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

Qeyd:

Dinamik import() sintaksisi ECMAScript (JavaScript) təklifi fazasındadır və hələki dil standartının bir hissəsi deyil. Bu təklif yaxın gələcəkdə standarta qəbul ediləcək.

Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu işlədə bilərsiniz. Bu xusiyyəti həmçinin Next.js də dəstəkləyir.

Əgər Webpack-i özünüz quraşdırırsınızsa, Webpack-in kod parçalaması haqqında təlimatını oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən belə bir formada görünəcək.

Babel işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz babel-plugin-syntax-dynamic-import-dan istifadə edə bilərsiniz.

React.lazy

Qeyd:

React.lazy və Suspense serverdə render etmək üçün hazır deyil. Əgər sizə kod parçalanması server-də render olunan applikasiya üçün lazımdırsa, biz Loadable Components işlətməyi tövsiyyə edirik. Bunun server rendering üçün yaxşı təlimatı var.

React.lazy funskiyası dinamik import olunmuş komponenti adi komponent kimi render etməyə imkan yaradır.

Əvvəl:

import OtherComponent from './OtherComponent';

Sonra:

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

Bu avtomatik olaraq OtherComponent render olduğu zaman, komponent olan paketi yükləyəcək.

React.lazy funskiyası mütləq olaraq dinamik import() funskiyasını çağırmalıdır. Bu mütləq default eksportunda React komponenti olan modulu “resolve” edən Promise-ə qaytarmalıdır.

Suspense

Əgər MyComponent render olunduğu zaman OtherComponent olan modul hələ yükənməyibsə, biz modul yüklənənə kimi “fallback” kontenti (məsələn Yükləmə indikatoru) göstərməliyik. Bu Suspense komponenti ilə həyata keçirilir.

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Yüklənir...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

fallback propu komponent yüklənənə kimi render etmək istədiyiniz React elementini qəbul edir. Siz Suspense komponentini lazy komponentin üstündə istənilən yerdə yerləşdirə bilərsiniz. Siz hətta bir neçə lazy komponentləri bir Suspense komponenti ilə əhatə edə bilərsiniz.

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Yüklənir...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Xəta sərhədləri

Əgər modulun yüklənməsi uğursuz keçirsə (məsələn, şəbəkə problemlərinə görə), xəta göstəriləcək. Siz yaxşı İstifadəçi Təcrübəsi üçün bu xətaları tutmaq və bu xətaları bərpa etmək üçün Xəta Sərhədlərindən istifadə edə bilərsiniz. Xəta Sərhədini yaratdıqdan sonra, siz şəbəkə xətası göstərmək üçün bu xəta sərhədini lazy komponentin yuxarısında istənilən yerdə istifadə edə bilərsiniz.

import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Yüklənir...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

Route əsasında kod parçalaması

Applikasiyanızda harada kod parçalaması etmək biraz çaşdırıcı ola bilər. Siz həmişə İstifadəçi Təcrübəsini pozmamaq və paketləri bərabər ayırlmaq üçün düzgün yerdən applikasiyanı bölməlisiniz.

Yaxşı başlanğıc nöqtəsi route-lardan bölməni aparmaqdır. Bir çox insan vebdə səhifə keçidlərinin yüklənməsinin zaman aldığına vərdiş ediblər. Bu zaman siz həmçinin bütün səhifəni dərhal yenidən render edirsiniz deyə istifadəçilər eyni zamanda səhifədəki başqa elementlərə qarşılıqlı təsir etmirlər.

Aşağıdakı nümunədə React RouterReact.lazy-dən istifadə edərək applikasiya kodunu route əsasında parçalanması göstərilib.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Yüklənir...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Adlı Eksportlar

React.lazy yalnız default eksportları dəstəkləyir. Əgər sizin import etmək istədiyiniz modul, adlı eksportlar edirsə, siz bu adlı eksportları yenidən default eksport edən ara modulu yarada bilərsiniz. Bu tree shaking-in işlədiyini və lazım olmayan komponentlərin yüklənmədiyini təmin edir.

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));