Vue路由懒加载的原理及实现

懒加载原理：
路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件，运行后用户查看相关模块显示的内容时会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时在浏览器中可能会出现短暂的空白页，从而降低用户体验。

而路由懒加载是将各个模块分开打包，在用户查看下相关模块内容时就直接引入相关模块的打包文件然后进行显示，从而有效的解决了浏览器可能出现短暂时间空白页的情况。

懒加载可以分割代码块，提高页面的初始加载效率解决白屏问题。下面是几种常见vue路由懒加载的方法 

1.ES6推荐方式imprort ()----推荐使用

 

2 webpack提供的require.ensure()实现懒加载 

1：这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

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

3：第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。

4：第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一 起，这样就生成了两个chunk,第一次加载时只加载主文件。

5：第三个参数是错误回调。

6：第四个参数是单独打包的chunk的文件名import Vue from 'vue';
 

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

 

3.使用vue异步组件resolve

这一种方法比较常见。它主要是使用了resolve的异步机制，用require代替了import, 实现按需加载，下面是代码示例

//const 组件名 = resolve => require([‘组件路径’],resolve)
//（这种情况下一个组件生成一个js文件）
const home = resolve => require(['../view/home'],resolve)

  

4.import和require的比较

import 是解构过程并且是编译时执行

require 是赋值过程并且是运行时才执行，也就是异步加载

require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量