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

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.

Помогите нам улучшить документацию

Если что-то отсутствует или не совсем понятно, пожалуйста опишите проблему в репозитории сайта или отредактируйте эту страницу.