一,前言
在使用angularJs时.可以实现路由的懒加载,即按需加载,对应用进行优化
Vue也可以实现按需加载,即路由的懒加载
这种方式,配置了懒加载的路由单独打包成文件,只有当依赖此组件时才会被下载
这就解决了当项目过大,组件过多时,导致初始化下载的文件较大耗时较长的问题
这一篇简单介绍一下vue-router路由懒加载的实现
二,路由的懒加载
这篇还是使用之前的例子,由于懒加载的配置很简单,不会贴出所有代码
未实现懒加载的路由写法:
//引入路由
import ProductDetail from '../pages/ProductDetail.vue'
//使用路由-只贴出了路由对象
{
path:'detail/:id',
component:ProductDetail //绑定路由组件对象
}
运行程序,点击商品进入商品详情:
查看network,app.js为打包输出js,在应用初始化时被下载,包含全部组件
现懒加载的路由写法:
{
path:'detail/:id',
component: reslove => require(['../pages/ProductDetail.vue'], reslove)
}
运行程序,点击商品进入商品详情:
当点击商品进入商品详情时,network中可以看到请求了一个新的js文件,
这个js文件对商品详情路由组件单独进行打包,并在依赖时才去下载
如果觉得这个名字不好,可以手动设置:
output-chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
结尾
路由懒加载就简单介绍一下,这里需要简单了解一下CommonJS,CMD,AMD规范