Gatsbyho rozdělení kódu

Moderní webové aplikace jsou nyní považovány za balíky modulů vzájemné interakce za účelem vytváření funkcí/vlastností. Seskupování je proces sloučení kódu do jednoho „balíčku“ (předpokládejme:skript/soubor), který se má doručit uživateli.

Rozdělení kódu převádí tyto „balíčky“ z jednoho souboru na mnoho, což může dále výrazně zlepšit výkon líným načítáním pouze části vašeho webu, které uživatel potřebuje.

Příklad sdružování kódu (před rozdělením kódu):

Nezpracovaný kód:

// /pages/Index.js
import { add } from '../components/math.js'

console.log(add(15, 15)); // 30

// /components/math.js
export function add(a, b) {
  return a + b;
}

Přiložený kód:

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

console.log(add(15, 15)); // 30

Jak vidíte, sdružování je proces sloučení vašich importovaných souborů/"modulů" do jednoho "balíčku". I když je to skvělé, může to vést k dlouhým dobám načítání, protože vaše aplikace roste s přidanými stránkami a funkcemi.

Rozdělení kódu

Svůj web můžete urychlit tím, že načtete pouze to, co uživatel potřebuje, místo abyste doručili celou aplikaci najednou.
Např. načtením pouze komponent, které jsou NA stránce, kterou si uživatel prohlíží.

Jedna věc, která dělá Gatsbyho mocným, je, že to dělá za vás. Gatsby automaticky a inteligentně rozděluje kódy, když spustíte gatsby build . Činí tak však specifickým způsobem. Například:

Představte si, že váš web má dvě stránky:vstupní stránku a kontaktní stránku. Každá stránka má 2 jedinečné součásti; 4 celkem:

-- Vstupní stránka

• Hero.js (komponenta)
• Services.js (komponenta)

-- Kontaktní stránka

• ContactInfo.js (komponenta)
• ContactForm.js (komponenta)

V tradiční aplikaci React si uživatel, který navštíví vstupní stránku, stáhne balíček obsahující vše komponent -- Hero, Services, ContactInfo a ContactForm -- přestože ke správnému zobrazení vstupní stránky potřebujete pouze komponenty Hero a Services.

Vynásobte to řekněme 10 stránkami a máte problém – poskytujete 10 MB datové zátěže na 1 MB stránku.

Gatsby přistupuje k rozdělování kódu takto:na základě stránky po stránce.

Tato síla Gatsbyho může být také skutečnou nevýhodou při vytváření jednostránkového webu . Vzhledem k tomu, že Gatsby rozděluje balíčky podle stránek, skončíte tím, že budete klientovi dodávat zbytečně masivní náklad, což zpomalí váš největší obsahový nátěr / počáteční načítání.

Takže... řešení?

Komponenty pro dělení kódu namísto stránek

Dělení kódu vám pomáhá líně načítat pouze to, co uživatel potřebuje, a zkrátit počáteční dobu načítání, aniž byste měnili množství kódu, který jste napsali.

Tým React vytvořil React.lazy a Suspense pro implementaci tohoto, ale bohužel ani jeden není kompatibilní s vykreslováním na straně serveru/Gatsby.

Místo toho doporučují používat knihovnu s názvem Loadable Components.

Používání načítatelných komponent s Gatsby

Komponenty pro dělení kódu pomocí Loadable-Components v Gatsby je jednoduché. Začněte instalací závislostí

npm install @loadable/component
# or use yarn
yarn add @loadable/component

Poté na libovolné stránce, kterou chcete líně načíst komponentu:

Změna:

import Hero from '../components/Hero'
import Services from '../components/Services'

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

Na:

import loadable from '@loadable/component'

import Hero from '../components/Hero'
const Services = loadable(() => import('../components/Services'))

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

A to je vše! Services.js bude nyní načten ve vlastním balíčku, odděleném od toho, který obsahuje Hero.js . Jak vidíte v tomto příkladu, jednou z metod použití načítatelných komponent pro web s jednou stránkou je import obsahu nad okrajem normálně a líné načítání obsahu pod ním.

Bonus:Určení záložního řešení bez napětí

Když komponentu líně načtete, odložíte ji při prvním načtení stránky. Proto bude krátká doba, kdy váš obsah nebude viditelný. Během tohoto období můžete zobrazit zástupný symbol:

import loadable from '@loadable/component'

import Hero from '../components/Hero'
const Services = loadable(() => import('../components/Services'), {
  fallback: <div>Loading...</div>,
})

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

Slovo "Loading..." se nyní bude zobrazovat, dokud nebude vaše komponenta vykreslena.

Pomohl vám tento článek?

Pokud ano, věnovali byste chvilku sdílení článku kliknutím níže? Nesmírně to pomáhá naší věci!

Nezapomeňte také kliknout na tlačítko Sledovat, abyste byli upozorněni na zveřejnění nových příspěvků 🔔