Vue核心技术-42,vue-router-路由懒加载

一,前言

在使用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规范