Ленивая загрузка путей

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

Совместное использование асинхронной загрузки компонентов Vue и разделения кода WebPack делает реализацию ленивой загрузки компонентов в зависимости от путей тривиальной.

Всё, что требуется — определить компоненты путей как асинхронные:

const Foo = resolve => {
  // require.ensure — это специальный синтаксис Webpack'а для определения точки разделения кода.
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

Можно также упростить запись, используя альтернативный синтаксис разделения кода AMD:

const Foo = resolve => require(['./Foo.vue'], resolve)

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

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

Объединение компонентов в единую минисборку

Иногда может понадобиться объединить в единую минисборку все компоненты, расположенные по определённому пути. Для достижения этой цели можно использовать именованные минисборки Webpack, указывая имя как третий параметр при вызове require.ensure:

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

Webpack сгруппирует все одноимённые асинхронные модули в единую минисборку — что среди прочего будет означать отсутствие необходимости явно указывать зависимости для require.ensure (поэтому мы и передаём первым параметром пустой массив).

results matching ""

    No results matching ""