在打包构建的应用时,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会将任何一个异步模块与相同的块名称组合到相同的异步块中。