✂️ Dzielenie Kodu

Parcel od razu wspiera dzielenie kodu bez żadnej konfiguracji. To pozwala na dzielenie kodu aplikacji na osobne paczki, które mogą być wczytywane na żądanie. To oznacza mniejszy rozmiar paczki początkowej i szybsze wczytywanie się aplikacji. W miarę jak użytkownik porusza się po aplikacji i kolejne moduły stają się potrzebne, Parcel automatycznie zajmie się wczytaniem paczek potomnych.

Dzielenie kodu może być kontrolowane poprzez użycie proponowanej składni import(), która działa tak jak zwykły import czy funkcja require, ale zwraca Promise. To oznacza, że moduły są ładowane asynchronicznie.

Poniższy przykład pokazuje jak można używać dynamicznego importowania, aby wczytać podstronę aplikacji na żądanie.

// pages/about.js
export function render() {
  // Renderuj stronę
}

import('./pages/about').then(function(page) {
  // Renderuj stronę
  page.render()
})

Ponieważ import() zwraca Promise, możesz również użyć składni async/await. Prawdopodobnie wymagana będzie konfiguracja Babel, by transpilować składnię, dopóki szersze wsparcie przez przeglądarki nie zostanie zapewnione.

const page = await import('./pages/about')
// Renderuj stronę
page.render()

Dynamiczne importy są w Parcel również wczytywane z opóźnieniem, dlatego możesz dalej umieszczać wszystkie swoje import()y na górze pliku, a paczki potomne i tak nie będą wczytane do czasu ich użycia. Poniższy przykład ilustruje, jak można wczytywać podstrony aplikacji z opóźnieniem.

// Zdefiniuj mapę nazw stron do dynamicznych importów.
// Nie zostaną one załadowane do czasu ich użycia.
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
}

async function renderPage(name) {
  // Wczytaj żądaną stronę z opóźnieniem.
  const page = await pages[name]
  return page.render()
}

Uwaga:: Jeśli chcesz użyć składni async/await w przeglądarkach, które nie wspierają jej natywnie, pamiętaj o załączeniu babel-polyfill w swojej aplikacji lub babel-runtime + babel-plugin-transform-runtime in bibliotekach.

yarn add babel-polyfill

import 'babel-polyfill'
import './app'

Przeczytaj dokumentację na temat babel-polyfill i babel-runtime.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.