跳转至

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

注意#，本文重点讲解的是：在整个应用里，不同的界面组件在用户实际跳转时才进行加载(从服务端下载js)并显示的功能实现。相当于实现的是各个页面懒加载。

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

一、Vue-Router 路由重现

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    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赋值一个函数，即可实现懒加载模式： 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    // 默认的
    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)

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    [
    {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路由官方文档的解决方法： 

1
2
3
4
5
    // 默认的
    component: require('@/pages/login')

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    [
    {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 赋值为组件。将其赋值为一个加载工厂函数，即实现按需加载。

Author: Microanswer
Source: https://www.microanswer.cn/blog/44