vue-router路由懒加载
懒加载,就是lazy-loading,顾名思义延迟加载,什么时候用到了什么时候去加载;一个普通的Vue单页应用项目,直接去使用webpack去打包,那么打包后的javascript包体积会非常的大,导致进入首页的时间会非常长;于是就有了懒加载的思路;那么什么是路由懒加载呢?把不同路由对应的不同组件分割成不同的代码块,当路由被访问时,再去加载对应的组件 这就是利用vue的异步组件...
·
懒加载,就是lazy-loading,顾名思义延迟加载,什么时候用到了什么时候去加载;
一个普通的Vue单页应用项目,直接去使用webpack去打包,那么打包后的javascript包体积会非常的大,导致进入首页的时间会非常长;于是就有了懒加载的思路;
那么什么是路由懒加载呢?
把不同路由对应的不同组件分割成不同的代码块,当路由被访问时,再去加载对应的组件 这就是利用vue的异步组件和webpack的代码分割;
想了解vue异步组件,请挪步这里
想了解webpack的代码分割,请挪步这里
路由懒加载具体代码实现:
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['components/index.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})
更多推荐
已为社区贡献9条内容
所有评论(0)