✂️ Разделение кода

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

Разделение кода контролируется с помощью динамической функции import() (syntax proposal), которая работает как обычный 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.