✂️ Розділення коду

Parcel підтримує поділ коду з коробки без настройки. Це дозволяє розділити код програми на окремі бандли, які можуть бути завантажені на вимогу, що означає менші розміри початкового бандла і більш швидкий час завантаження. Parcel автоматично подбає про завантаження дочірніх бандлів у міру потреби модулів під час переміщення користувача по додатку.

Поділ коду контролюється за допомогою (пропозиції синтаксису (syntax proposal)) для динамічної функції import(), яка працює як звичайний вираз import або функція require, але повертає Promise. Це означає, що модуль завантажується асинхронно.

У наступному прикладі показано, як можна використовувати динамічний імпорт для завантаження підсторінки вашого застосування на вимогу.

// pages/about.js
export function render() {
  // Показати сторінку
}

import('./pages/about').then(function (page) {
  // Показати сторінку
  page.render();
});

Так як import() повертає Promise, ви можете використовувати синтаксис async/await. Ймовірно, вам потрібно налаштувати Babel для перетворення синтаксису, поки він більш широко не підтримується браузерами.

const page = await import('./pages/about');
// Показати сторінку
page.render();

Динамічний імпорт також ліниво завантажується в Parcel, тому ви можете помістити всі свої виклики import() вгорі файлу, а дочірні бандли, не завантажуватимуться до тих пір, поки вони не будуть використані. У наступному прикладі показано, як можна ліниво завантажувати підсторінки додатка динамічно.

// Налаштуйте карту імен сторінок для динамічного імпорту.
// Вони не завантажуються до тих пір, поки вони не будуть використані.
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};

async function renderPage(name) {
  // Ліниво завантажити запитану сторінку.
  const page = await pages[name];
  return page.render();
}

Примітка: Якщо ви хочете використовувати async / wait в браузерах, які не підтримують його, не забудьте включити babel-polyfill в вашому додатку абоbabel-runtime + babel-plugin-transform-runtime в бібліотеках.

yarn add babel-polyfill

import "babel-polyfill";
import "./app";

Прочитайте документацію babel-polyfill і 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.