React和Vue组件的懒加载

懒加载，也可以成为按需加载，即页面、数据或者组件在需要加载的时候才进行加载，在开始只加载需要的最少的静态资源和数据信息，尽快的展示首屏页面。
现在先不谈技术，谈谈为什么需要按需加载。有调查显示：页面的加载速度会影响客户的使用体验，加载时间每增加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: '
I am async!
'
    })
  }, 1000)
})

这里是一个定时器，我们也可以使用ajax请求组件，然后调用resolve即可。
在实际使用中，如何实现组件的懒加载呢？主要用在两个方面，一是路由中，二是动态组件。

1、路由中组件懒加载

假设有一个表单组件如下：

<template>
    <div id='form'>
        <h3>this is a formh3>
        <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">显示formbutton>
    <button @click="hideForm1">隐藏formbutton>
   
   <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 formh3>
          <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()}>tooglebutton>
          {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]