Chargement à la volée

Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquetage JavaScript peut devenir un peu lourd, et donc cela peut affecter le temps de chargement de la page. Il serait plus efficace si l'on pouvait séparer chaque composant de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée.

En combinant la fonctionnalité de composant asynchrone (opens new window) de Vue et la fonctionnalité de scission de code (opens new window) de webpack, il est très facile de charger à la volée les composants de route.

Premièrement, un composant asynchrone peut définir une fonction fabrique qui retourne une Promesse (qui devrait résoudre le composant lui-même) :

const Foo = () =>
  Promise.resolve({
    /* définition du composant */
  })

Deuxièmement, avec webpack 2, nous pouvons utiliser la syntaxe d'import dynamique (opens new window) pour indiquer un point de scission de code :

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

Note

si vous utilisez Babel, vous aurez besoin d'ajouter le plugin syntax-dynamic-import (opens new window) de façon à ce que Babel puisse analyser correctement la syntaxe.

En combinant les deux, on définit un composant asynchrone qui sera automatiquement scindé par webpack :

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

Rien n'a besoin d'être modifié dans la configuration de la route, utilisez Foo comme d'habitude.

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

Grouper des composants dans le même fragment

Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même fragment asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les fragments nommés (opens new window) en donnant un nom au fragment en utilisant une syntaxe de commentaire spéciale (requires 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 groupera tous les modules asynchrones avec le même nom de fragment dans le même fragment asynchrone.