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('需要加载的模块地址')
网友评论