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

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

Совместное использование асинхронной загрузки компонентов (opens new window) Vue и возможностей по разделению кода (opens new window) Webpack делает реализацию ленивой загрузки компонентов в зависимости от маршрутов тривиальной.

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

const Foo = () =>
  Promise.resolve({
    /* определение компонента */
  })

Во-вторых, с Webpack 2 мы можем использовать синтаксис динамических импортов (opens new window) для указания точек разделения кода:

import('./Foo.vue') // возвращает Promise

Примечание

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

Эти два пункта — всё необходимое, чтобы определить асинхронный компонент, который Webpack автоматически выделит в отдельный фрагмент:

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

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

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

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

Иногда может понадобиться объединить в одном фрагменте все компоненты, расположенные по определённому маршруту. Для этого можно указывать имена фрагментов Webpack (opens new window), используя специальный синтаксис комментариев (в версиях 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 сгруппирует все одноимённые асинхронные модули в одном фрагменте.