vue-router路由懒加载(按需加载)的实现（解决vue项目

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

未使用懒加载时,全部用 import ... from ...

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
// import .....
// import ......

Vue.use(Router);
export default new Router({
routes:[
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
]
})

image.png

如果路由有上百个，那么要一次把上百个页面import进来，耗时也太长了！

vue-router路由懒加载的实现（解决vue项目首次加载慢）

1、vue异步组件

component : resolve => { reuqire([‘需要加载的路由地址’]) , resolve )

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
   // component: (resolve)=>{require(["@/components/HelloWorld"],resolve}
    }
]
})

2、ES6的import()

const 组件名=() => import('组件路径');

import Vue from 'vue';
import Router from 'vue-router';
const  HelloWorld = ()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
    }]
})

3、webpack的require.ensure()

require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。

第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = resolve=>{
        require.ensure(['@/components/HelloWorld'],()=>{
            resolve(require('@/components/HelloWorld'))
        })
    }
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
    }]
})

使用懒加载好处 为给客户更好的客户体验 首屏组件加载速度更快一些

通俗得说 ，即在需要的时候的时候进行加载。

附：解决vue 首页加载缓慢、白屏现象

web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染
我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化

1、路由懒加载

2、ui框架按需加载

3、webpack gzip压缩

4、巨大的数组或对象使用Object.freeze 来冻结一个对象

其他改善首屏白屏的方法：
骨架屏，loading