懒加载也叫延迟加载，即在需要使用指定代码块的时候才进行代码块的加载。

详见 官方文档

路由懒加载

在打包构建应用时，JavaScript包会非常大，影响页面的加载。如果将不同的路由对应的组件分割成不同的代码块，在路由被访问的时候才进行对应代码块的加载，会大大提高首页的加载效率。

使用vue的异步组件结合webpack代码分割功能实现的懒加载可以轻松的实现路由懒加载

将异步组件定义成返回一个Promise的工厂函数（该函数返回的Promise应该resolve组件本身），然后使用webpack（>webpack2）的动态import语法定义代码分块点，结合这两点就可以定义一个能被webpack自动代码分割的异步组件。

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

把组件按组分块

如果需要把某个路由下的所有组件打包在同一个异步块（chunk）中，需要使用webpack（>webpack2.4）的特殊注释语法来提供chunk name

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