路由懒加载

在打包构建的应用时，js包会变得特别大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，

这样就更加高效了。

结合Vue的异步组件和webpack的代码分割功能，轻松实现由路由的懒加载。

1 可以将异步组件定义为返回一个Promise的工厂函数，改函数返回的Promise应该resolve组件本身

2 在webpack2中，我们可以使用动态import 语法来定义代码分块点

结合两者，这就是如何定义一个能够被webpack自动代码分割的异步组件：

1 

let route=[{

　　path:'/login',

　　component:(resolve)=>require(['./views/login.vue'],resolve)

}];

2 const login=()=>import ('./views/login');

let route=[{

　　path:'/login',

　　component:login

}];

把组件按组分块

有时候想把某个路由下的所有组件都打包再同一个异步块中。只需要使用 命名chunk，一个特殊的注释语法来提供chunk name webpack>2.4

const test1=()=>import (/*webpackChunkName:'group-test'*/'./views/test1');

const test2=()=>import (/*webpackChunkName:'group-test'*/'./views/test2');

const test3=()=>import (/*webpackChunkName:'group-test'*/'./views/test3');

webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。