✂️ Разделение кода
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.
Помогите нам улучшить документацию
Если что-то отсутствует или не совсем понятно, пожалуйста опишите проблему в репозитории сайта или отредактируйте эту страницу.