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: '<div>I am async!</div>'
    })
  }, 1000)
})

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

1、路由中组件懒加载

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

<template>
    <div id='form'>
        <h3>this is a form</h3>
        <p>
          <label>name:</label</