七牛云面试

Vue中的懒加载

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

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 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: () => <div>Loading...</div>,
});
const FormReact = () => (
  <LoadableOtherComponent/>
);

方式二
webpack+es6的import +async(高阶函数)

  async componentWillMount(){

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

            this.setState({

                Com:Com.default?Com.default:null

            });

        };

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值