Vue Router routing lazy loading

Official write very clear !!!!!!!!!

Routing lazy loading

When the package build applications, Javascript package will become very large, affecting page load. If we can assembly corresponding to a different route into a different code blocks, and then when the route is accessed before loading corresponding components, so the more efficient.

Vue binding of the asynchronous component and Webpack of the code division function , easy routing component lazy loading.

First, the asynchronous component may be defined to return a plant Promise function (the function returns Promise should resolve components themselves):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

Second, in Webpack 2, we can use the dynamic import syntax to define points of code block (split point):

import('./Foo.vue') // 返回 Promise

note

If you are using Babel, you will need to add  syntax-dynamic-import plug-ins to make Babel can correctly parse grammar.

A combination of both, which is how to define the asynchronous component that can be divided Webpack a automatic code.

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

In routing configuration nothing needs to be changed, just as usual use  Foo:

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

# The assembly component by block

Sometimes we want all of the components are packaged in a route in the same asynchronous block (chunk) in. Just use the  name chunk , a special comment syntax to provide a chunk name (required 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 asynchronous module will be combined with any of the same name into the same block of the asynchronous block.