路由懒加载:把不同路由对应的组件分割称成不同的代码块,然后当路由被访问的时候才加载对应组件
Vue中实现路由懒加载的方法:结合Vue的异步组件和webpack的代码分割功能,轻松实现路由组件的懒加载
Vue异步组件
{
components: {
custom: (resolve,reject) => {}
}
}
webpack代码分割功能
require.ensure代码分块
require.ensure(依赖,回调函数,[chunk名字])
import函数
看个小例子:
路由懒加载:
1、使用require.ensure代码分块
let Layout = (resolve)=>{//Vue异步组件
return require.ensure([],()=>{//webpack代码分割
resolve(require('@/views/layout'))
})
}
在这个回调函数中还可以添加第三个参数(chunk参数):
let Layout = (resolve)=>{//Vue异步组件
return require.ensure([],()=>{//webpack代码分割
resolve(require('@/views/layout'))
},"csdn")
}
2、除了上面的方法,我们也可以使用动态import语法来定义代码分块点,所以上面的也可以写成:
let Layout = (resolve)=>{//Vue异步组件
return import('@/views/layout')
}
代码简洁多了哈
组件按组分块
如果我们想要把某个路由下的所有组件都打包在同个异步块(chunk)中。只需要让他们的第三个参数一样即可)如下示例
扫描二维码关注公众号,回复:
2324506 查看本文章
let Workbench = (resolve)=>{
return require.ensure([],()=>{
resolve(require('@/views/backend/workbench'))
},"csdn")
}
let Doc = (resolve)=>{
return require.ensure([],()=>{
resolve(require('@/views/backend/doc'))
},"csdn")
}
同样的,也可以使用import函数实现把组件按组分块:
如下所示:只需要使用命名chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
let Workbench = (resolve)=>{
return import(/* webpackChunkName:"group-csdn" */ '@/views/backend/workbench')
}
let Doc = (resolve)=>{
return import(/* webpackChunkName:"group-csdn" */ '@/views/backend/doc')
}
在routes中的配置:不需要怎么改变,还是下面的这种格式(和直接写组件名一样哈)
routes:[
{
path:'/management',
name:'Management',
component:Layout,//可以直接写一个组件,也可以是一个异步的回调函数
}
]