Vue路由懒加载

VUE路由懒加载及组件懒加载
一、为什么要使用路由懒加载　　为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
二、定义　　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
三、使用　　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

实现方法：

[1]const home = r => require.ensure([], () => r(require('../home')), 'home')
webpack 1.X 用的多
[2]. const Hello = ()=> import('./hello')
webpack>2.4
注意当调用 ES6 模块的 import() 方法（引入模块）时，必须指向模块的 .default 值，因为它才是 promise 被处理后返回的实际的 module 对象
需要配合babel的syntax-dynamic-import插件
这是vue-router 官方文档提供的方法
查询资料时发现，这种写法如果项目有几十个页面，页面热更新速度慢。
可以使用babel 的 plugins babel-plugin-dynamic-import-node。
它只做一件事就是将所有的import()转化为require()，这样就可以用这个插件将所有异步组件都用同步的方式引入
[3].resolve => require(['../components/PromiseDemo'], resolve)

示例：
1、未用懒加载的代码，vue中路由代码如下

        import Vue from 'vue'

        import Router from 'vue-router'

        import HelloWorld from '@/components/HelloWorld'

        Vue.use(Router)

         export default new Router({

         routes: [ { path: '/', name: 'HelloWorld',component:HelloWorld} 

         ] })

2、vue异步组件实现懒加载

    方法：component：resolve=>(require(['需要加载的路由的地址'])，resolve)
3、ES 提出的import方法，（------最常用------）

    方法：const HelloWorld = （）=>import('需要加载的模块地址')    （不加 { } ，表示直接return）

四、组件懒加载

相同与路由懒加载
1、原来组件中写法 相同与路由懒加载
2、const方法
3、异步方法

五、总结：

路由和组件的常用两种懒加载方式：
1、vue异步组件实现路由懒加载
component：resolve=>(['需要加载的路由的地址'，resolve])
2、es提出的import(推荐使用这种方式)
const HelloWorld = （）=>import('需要加载的模块地址')

原文链接：https://www.jianshu.com/p/36a257634ac7