Ленивая загрузка маршрутов

При разработке приложений с использованием бандлера, JavaScript-сборка может стать довольно большой, что повлияет на время загрузки страницы. Было бы эффективнее разделить компоненты каждого маршрута на отдельные фрагменты и загружать их только при посещении маршрута.

Vue Router поддерживает динамические импорты по умолчанию, что означает, что вы можете заменить статические импорты динамическими:

// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

Параметр component (и components) принимает функцию, которая возвращает Promise компонента, и Vue Router будет загружать его только при первом переходе на страницу, затем использовать кэшированную версию. Это означает, что вы также можете использовать более сложные функции, если они возвращают Promise:

const UserDetails = () =>
  Promise.resolve({
    /* component definition */
  })

В целом, рекомендуется всегда использовать динамические импорты для всех ваших маршрутов.

Примечание

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

При использовании бандлера, такого как webpack, это автоматически позволит воспользоваться разделением кода.

При использовании Babel, вам необходимо добавить плагин syntax-dynamic-import, чтобы Babel смог правильно разобрать синтаксис.

Группировка компонентов в одном фрагменте

Иногда мы можем захотеть сгруппировать все компоненты, вложенные под одним маршрутом, в один асинхронный фрагмент. Для этого необходимо использовать именованные фрагменты, указав имя фрагмента с использованием специального синтаксиса комментария (требуется webpack > 2.4):

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

webpack сгруппирует любые асинхронные модули с одинаковым именем фрагмента в один асинхронный фрагмент.