七牛云面试

Vue中的懒加载

方式一：
Vue工厂函数异步解析组件，Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供将来重新渲染使用。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '
I am async!
'
    })
  }, 1000)
})

方式二：
import动态加载

const formVue = () => import ('./functional/form.vue')

React中路由的懒加载：

方式一：
若要实现组件的懒加载，可引入react-loadable组件，接着通过import动态加载。安装该组件如下：

npm install -save react-loadable

//import FormReact from './Form';

const LoadableFormComponent = Loadable({
  loader: () => import('./Form'),
  loading: () => 
Loading...
,
});
const FormReact = () => (
  
);

方式二
webpack+es6的import +async（高阶函数）

  async componentWillMount(){

            let Com=await loading();  //依次执行，只有一个await往下走，Com是有值的

            this.setState({

                Com:Com.default?Com.default:null

            });

        };

方式三：
webpack和commonJS的require.ensure (高阶组件)