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

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

Объединив возможность асинхронных компонентов Vue и возможность разделения кода webpack, ленивая загрузка компонентов маршрутов становится тривиально простой.

Сначала асинхронный компонент можно определить как функцию-фабрику, которая возвращает промис (который должен разрешиться в сам компонент):

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

Во-вторых, в webpack 2 мы можем использовать синтаксис динамического импорта, чтобы указать точку разделения кода:

import('./Foo.vue') // returns a Promise

Примечание

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

Объединив эти два подхода, вот как определить асинхронный компонент, который будет автоматически разделен кодом webpack:

const Foo = () => import('./Foo.vue')

В конфигурации маршрута ничего менять не нужно, просто используйте Foo как обычно:

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }]
})

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

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

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

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