【Vue】页面组件懒加载,动态加载组件,按需加载,路由懒加载。

前端页面逻辑如果全部放在一个js文件里,必然显得臃肿,不仅浪费了用户的流量,还徒徒添加了用户许多加载时间。本文示列了如何将vue路由实现为懒加载模式,仅当用户要进入对应界面时,才会进行加载。

【Vue】页面组件懒加载,动态加载组件,按需加载,路由懒加载。

by img MicroAnswer Create at:Oct 16, 2019 9:50:07 AM 

Tags: vue vue-router 懒加载

前端页面逻辑如果全部放在一个js文件里,必然显得臃肿,不仅浪费了用户的流量,还徒徒添加了用户许多加载时间。本文示列了如何将vue路由实现为懒加载模式,仅当用户要进入对应界面时,才会进行加载。


重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

注意#,本文重点讲解的是:在整个应用里,不同的界面组件在用户实际跳转时才进行加载(从服务端下载js)并显示的功能实现。相当于实现的是各个页面懒加载。如果你在寻求的是:在某一个界面里,根据服务端返回的不同数据动态渲染控件到界面上的功能,请参考这篇文章:【Vue】动态添加组件的两种实现

使用cli工具创建的vue项目一般来说,并没有为你自动配置vue-router路由支持,更加没有懒加载支持了。为了保证用户进入咱们的应用的速度,以及用户流量的重要性,我们十分有必要将应用中的各个界面进行懒加载处理。只有当用户确实需要进入某个界面的时候,才进行加载并显示。

一、Vue-Router 路由重现

为了更加便于理解,先放出来一个现存项目的已有路由列表。你不用担心是否明白其含义,基本上路由配置都是这样的:

let router = new Router({
    routes: [
        {path: '/login',      name: 'login',      component: require('@/pages/login')},
        {path: '/reg',        name: 'reg',        component: require('@/pages/reg')},
        {path: '/userinfo',   name: 'userinfo',   component: require('@/pages/userinfo')},
        {path: '/product',    name: 'product',    component: require('@/pages/product')},
        {path: '/payOk',      name: 'payOk',      component: require('@/pages/payOk')},
        {path: '/myorder',    name: 'myorder',    component: require('@/pages/gxbaodan')},
        {path: '/usercenter', name: 'usercenter', component: require('@/pages/usercenter')},
        {path: '/*',          name: 'notfound',   component: require('@/pages/notFound')}
    ]
});

可以看到,这里一共有7个界面以及一个空界面用于提示未找到。如果你程序不是很大,基本上就不需要做什么懒加载的需求,因为整体都只有很小的体积。但如果你的项目已经达到了几十个界面的规模,想必还是有必要进行懒加载支持的。

二、加入懒加载支持

1、第一种方法

Vue-Router提供了懒加载的配置方式,其配置方式非常简单,并且效果十分不错。上方的路由列表,咱们将其修改为懒加载的模式。目前它是直接require一个页面,如果我们为component赋值一个函数,即可实现懒加载模式:

// 默认的
component: require('@/pages/login')

// 将 component 赋值为函数的
component: function (resolve) {
    return require(["@/pages/login"], resolve);
}

// 以 es6 格式编写
component: resolve => require(["@/pages/login"], resolve)
// 可以精简一下
component: r => require(["@/pages/login"], r)

当你某个页面使用这种方式建立路由表后,这个页面就变成了按需加载的了。现在来看看把上面所有的界面都修改为懒加载模式的:

[
{path: '/login',     name: 'login',     component: r => require(['@/pages/login'],      r)},
{path: '/reg',       name: 'reg',       component: r => require(['@/pages/reg'],        r)},
{path: '/userinfo',  name: 'userinfo',  component: r => require(['@/pages/userinfo'],   r)},
{path: '/product',   name: 'product',   component: r => require(['@/pages/product'],    r)},
{path: '/payOk',     name: 'payOk',     component: r => require(['@/pages/payOk'],      r)},
{path: '/myorder',   name: 'myorder',   component: r => require(['@/pages/gxbaodan'],   r)},
{path: '/usercenter',name: 'usercenter',component: r => require(['@/pages/usercenter'], r)},
{path: '/*',         name: 'notfound',  component: r => require(['@/pages/notFound'],   r)}
]

这样,你的各个页面都是懒加载了。用户如果打开登录页,则只会下载登录页的逻辑,点击跳转到其他页面是,会自动加载并显示,你甚至不需要修改其他的任何代码!

2、第二种方法

得益于webpack的加持,我们可以简化上面的写法,其实在最终意义上,它们可以说都是在给component赋值一个工厂函数,而不是直接赋值为组件。本方法也是Vue-Router路由官方文档的解决方法:

// 默认的
component: require('@/pages/login')

// 直接使用import实现
component: () => import('@/pageslogin')

是的,相对来说,这个代码上直观并且更加简单了。实现的效果也和懒加载效果是一样的。现在来看看完全修改后的代码:

[
{path: '/login',     name: 'login',     component: () => import('@/pages/login')      },
{path: '/reg',       name: 'reg',       component: () => import('@/pages/reg')        },
{path: '/userinfo',  name: 'userinfo',  component: () => import('@/pages/userinfo')   },
{path: '/product',   name: 'product',   component: () => import('@/pages/product')    },
{path: '/payOk',     name: 'payOk',     component: () => import('@/pages/payOk'])     },
{path: '/myorder',   name: 'myorder',   component: () => import('@/pages/gxbaodan')   },
{path: '/usercenter',name: 'usercenter',component: () => import('@/pages/usercenter') },
{path: '/*',         name: 'notfound',  component: () => import('@/pages/notFound'],) }
]

三、总结

无论使用哪种方案,最终都可以达到懒加载的目的。由于 Webpack 的代码分割功能,使我们轻松实现路由组件的懒加载。只要不直接为 component 赋值为组件。将其赋值为一个加载工厂函数,即实现按需加载。

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)