懒加载，也可以成为按需加载，即页面、数据或者组件在需要加载的时候才进行加载，在开始只加载需要的最少的静态资源和数据信息，尽快的展示首屏页面。
现在先不谈技术，谈谈为什么需要按需加载。有调查显示：页面的加载速度会影响客户的使用体验，加载时间每增加1s，可能都会造成一定比例的客户流失。具体的调查结果和详细数据这里不表，这应该是一个公认的事实了。
现在考虑下面两种情况：
1、网站在开始加载了所有请求，从输入url到首屏展示需要15s，后续切换Tab页等等可以立马展示，不需再加载。
2、网站只加载首屏需要的最小资源的集合，从输入url到首屏展示需要3s，但是切换Tab页等等的时候需要加载必须的资源，从切换Tab页到页面展示可能需要1s。
两种情况你会选择哪一种，我想第二种情况选择的人数应该占绝大多数。让客户等待15s是一件不太可能的事情，除非别无他选，否则客户很可能投入友商的怀抱。从使用习惯的角度来看，切换Tab页，客户潜意识会告诉自己，这需要一点时间，就像输入url到页面显示一样。
现在说说如何实现组件的懒加载：
Vue组件懒加载
Vue 允许以工厂函数的方式定义组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
注意，Vue工厂函数异步解析组件，即代表我们可以在适当的时候加载组件，加载完毕后告诉Vue可以进行渲染了即可。看个例子：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})这里是一个定时器，我们也可以使用ajax请求组件，然后调用resolve即可。
在实际使用中，如何实现组件的懒加载呢？主要用在两个方面，一是路由中，二是动态组件。
1、路由中组件懒加载
假设有一个表单组件如下：
<template>
<div id='form'>
<h3>this is a form</h3>
<p>
<label>name:</label><input name='name' :value="name"/>
</p>
<p>
<label>age:</label><input name='age' :value="age"/>
</p>
</div>
</template>
<script>
export default {
name: 'formDemo',
data () {
return {
name: 'xxxx',
age: 18
}
}
}
</script>
<style scoped>
</style>在路由中如下引用：
import Vue from 'vue'
import Router from 'vue-router'
const form = () => import('@/components/functional/form.vue')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/form',
name: 'form',
component: form
}
]
})这就实现了路由组件的懒加载，在渲染该组件时，会向后台发送一个ajax请求，请求该组件，并且缓存该组件，下次渲染时使用。
2、动态组件
我们经常在组件中引用多个组件，例如可能某个组件需要多个弹窗，使用动态组件可以轻松实现。在组件中引用上述的form表单组件，可如下:
<template>
<div>
<button @click="showForm1">显示form</button>
<button @click="hideForm1">隐藏form</button>
<!--动态组件-->
<component :is="componentName"></component>
</div>
</template>
<script>
import formVue from './functional/form.vue'
export default {
name: 'formDemo',
data () {
return {
componentName: ''
}
},
components: {
formVue
},
methods: {
showForm1 () {
this.componentName = 'formVue'
},
hideForm1 () {
this.componentName = ''
}
}
}
</script>若要实现组件懒加载，则如下即可：
// import formVue from './functional/form.vue'
const formVue = () => import ('./functional/form.vue')上面就是Vue中常用的组件懒加载方法。其实总结起来就是下面这行代码：
const formVue = () => import ('./functional/form.vue')动态import是比较新的东西，别忘了兼容性。
React组件懒加载
React中组件的懒加载与Vue类似，还是以刚刚form组件为例，我们当然用react 函数式组件表示如下：
import React from 'react';
/**
* 表单form组件
*/
function FormReact (props) {
return (
<div>
<h3>this is form</h3>
<p>
<lable>name:</lable>
<input value={props.name} />
</p>
<p>
<lable>age:</lable>
<input value={props.age} />
</p>
</div>
)
}
export default FormReact;在其他组件中可如下引用
import React from 'react';
import FormReact from './Form';
class FormUse extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
toogle() {
this.setState({
show: !this.state.show
})
}
render() {
return (
<div>
<button onClick={() => this.toogle()}>toogle</button>
{this.state.show &&
<FormReact name="xxx" age={18} />
}
</div>
);
}
}
export default FormUse;若要实现组件的懒加载，可引入react-loadabl组件，安装该组件：
npm install -save react-loadable组件的引用修改如下：
//import FormReact from './Form';
const LoadableFormComponent = Loadable({
loader: () => import('./Form'),
loading: () => <div>Loading...</div>,
});
const FormReact = () => (
<LoadableOtherComponent/>
);上面就实现了组件React组件的懒加载。
如需和我交流，请发邮件至[email protected]