懒加载

懒加载(Load On Demand)也称之为延迟加载，是一种按需加载加载组件的数据获取方法，当用户滚动页面的时候自动获取更多的数据，这样不仅缩短了系统响应时间，也提升了系统性能，更提高了用户的体验感同时最大程度上减少服务器端的资源耗用。

为什么需要懒加载

当我们项目很大的时候，打包应用后JavaScript 包会非常大，在首次载入页面的需要加载的内容会很多，这样加载的时间就很长，一般一个页面加载超过5s就会影响用户的体验感，甚至导致大量的用户流失。

非懒加载的路由配置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from './views/Home.vue'
export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home
 },
 ]
})

Vue异步加载

Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。使用vue的异步组件技术进行vue-router配置路由可以实现懒加载 ，这种情况下一个组件生成一个js文件。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
 path: '/',
 name: 'home',
 component: resolve => require(['@/views/home'], resolve)
 }
 ]
})

ES6 import()加载

这个import与前面非懒加载的路由配置中的import（静态加载）有点不同，这里是采用ES6语言实现的动态加载，使用ES6提出的import()方法进行vue-router配置路由实现懒加载，每个组件打包成一个js文件，也可以指定相同的webpackChunkName按组打包js文件，个人比较喜欢使用这个方案，方便快捷。

require.ensure() 加载

require.ensure() 是webpack提供的一种异步加载技术，可以实现按需加载资源包括js,css等文件。使用require.ensure() 方法进行vue-router配置路由实现懒加载，它可以将require中的文件进行单独打包，每个组件打包成一个js文件，也可以指定相同的ChunkName按组打包js文件。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
 path: '/',
 name: 'home',
 //[]：指请求下载的模块，按模块进行懒加载 
 component: resolve => require.ensure([], () => resolve(require('@/views/Home')), 'Home') 
 }
]
})

组件异步加载

除了通过路由实现懒加载我们还可以通过组件实现懒加载，一般我们引入组件的时候都是通过import静态调用的，其实这里我们可以借用路由懒加载的思路，使用ES6提出的import()方法进行动态载入组件，当组件被调用的时候才被渲染出来。

//静态载入组件
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>
//动态载入组件
<script>
//const HelloWorld = resolve => require(["@/components/HelloWorld"], resolve)
const HelloWorld = () =>import('@/components/HelloWorld')
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>

更多Vue实战技巧可以参考我的专栏：Vue实战系列

欢迎关注本人的公众号：编程手札

或者搜索公众微信号：ProgramNotes，文章也会在公众号更新