什么是懒加载？

即组件并非一次性全部加载，而是需要时再加载，也叫：“按需加载”。

为什么需要懒加载？

为了更好的用户体验。渲染更快，性能开销更低。

一个大型项目，如果组件一次性全部加载，通常太过庞大。会导致首页加载过慢，如果带宽不高则更加严重。

应该尽可能的使用懒加载。

有些组件并非所有人都会用到。例如：注册、登录。

很多用户可能只是想浏览首页，加载登录、注册组件不仅耗时，而且无用。占用带宽，消耗资源。

优化前

默认引入全部的组件，加载慢。

import Vue from 'vue' 
import Router from 'vue-router' 

import Home from '@/view/home/Home' 
import HomeMain from '@/view/home/module/HomeMain' 
import Register from '@/view/system/register/Register' 
import Login from '@/view/system/login/Login' 

Vue.use(Router); 

export default new Router({ 
    routes: [ 
        { 
            path: '/', 
            name: 'Home', 
            component: Home, 
            redirect: '/main', 
            children: [ 
                { 
                    path: '/main', 
                    name: HomeMain, 
                    component: HomeMain, 
                    meta: { 
                        keepAlive: true 
                    } 
                }, { 
                    path: '/register', 
                    name: 'Register', 
                    component: Register 
                }, { 
                    path: '/login', 
                    name: 'Login', 
                    component: Login 
                    } 
             ] 
       }
});

优化后

默认只引入首页组件，登录、注册组件使用懒加载。

component：路由跳转时会触发该方法，为了代码简洁，例子中用到了箭头函数。

require：加载组件。

import Vue from 'vue' 
import Router from 'vue-router' 

import Home from '@/view/home/Home' 
import HomeMain from '@/view/home/module/HomeMain' 
Vue.use(Router); 

export default new Router({ 
    routes: [ 
        { 
            path: '/', 
            name: 'Home', 
            component: Home, 
            redirect: '/main', 
            children: [ 
                { 
                    path: '/main', 
                    name: HomeMain, 
                    component: HomeMain, 
                    meta: { 
                        keepAlive: true 
                    } 
                }, { 
                    path: '/register', 
                    name: 'Register', 
                    component: resolve => require(["@/view/system/register/Register"], resolve), 
                    meta: { 
                        keepAlive: true 
                    } 
                }, { 
                    path: '/login', 
                    name: 'Login', 
                    component: resolve => require(["@/view/system/login/Login"], resolve),
                    meta: { 
                        keepAlive: true 
                    } 
                 } 
             ] 
       }
});

Tips：使用懒加载后，项目编译时，会将组件编译成单独的js文件，如果是一次性加载，则组件全部打包进app.js。

懒加载的三种方式：

（1）懒加载一

webpack提供的require.ensure()vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案一: webpack提供的require.ensure() */ 
{ 
    path: '/home', 
    name: 'home', 
    component: r => require.ensure([], () => r(require('@/components/home')), 'demo') 
}, { 
    path: '/index', 
    name: 'Index', 
    component: r => require.ensure([], () => r(require('@/components/index')), 'demo') 
}, { 
    path: '/about', 
    name: 'about',
    component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') 
}

（2）懒加载二

vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件

/* vue异步组件技术 */ 
{ 
    path: '/home', 
    name: 'home', 
    component: resolve => require(['@/components/home'],resolve) 
},{ 
    path: '/index', 
    name: 'Index', 
    component: resolve => require(['@/components/index'],resolve) 
},{ 
    path: '/about', 
    name: 'about', 
    component: resolve => require(['@/components/about'],resolve) 
}

（3）懒加载三

组件懒加载方案三 路由懒加载(使用import)（推荐使用）

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。 
/* const Home = () => import('@/components/home') 
const Index = () => import('@/components/index') 
const About = () => import('@/components/about') */ 

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块 
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home') 
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index') 
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')