React及vue实现按需异步加载

• 异步组件：定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存。

• Vue实现按需加载，结合使用webpack的代码分割功能进行。定义为异步加载的组件，在打包的时候，会单独打包成单独的js文件存储在static/js内，在调用的时候使用ajax请求回来插入到html。

比如在vue版本的资源刷新的弹框是写在一起的，虽然弹框内的内容是另一个组件。

但实际上，是需要值去控制其的显示与否的，并不是点击那个瞬间再去渲染，而是在引入这个页面的时候，弹框也全部加载完毕，只是因为 visible 为 false。

VUE实现按需加载

第一步：改变引入方式

import dialogDataRes from '@/pages/face/dialogDataRes.vue'

替换为

components: {
    dialogDataRes (resolve) {
      require(['@/pages/face/dialogDataRes.vue'], resolve)
    }
	// dialogDataRes
},

第二步：标签改变

<dialogDataRes
  ref="dialogRes"
  :dialog-visble-sub="dialogVisble"
  :platform-index-code="form.platformName"
  @save-org-data="saveOrg"
/> 

替换为

<component
  :is="currentComponent"
  ref="dialogRes"
  :dialog-visble-sub="dialogVisble"
  :platform-index-code="form.platformName"
  @save-org-data="saveOrg"
/>

将组件名称作为标签名的方式作出改变，利用component组件名称引入，

利用 is 属性来实现按需引入。

第三步： is 属性控制组件引入时机

在data内

data () {
    return {
      currentComponent: ''
    }
},

在需要组件渲染的逻辑内，比如按钮的 click 事件，

设置 currentComponent 为想要渲染的组件名称。

<el-button
    type="default"
    class="orgButton"
    v-model="form.dataOrgButton"
    @click="dialogVisble = true; currentComponent='dialogDataRes'"
>
    {{ saveDataOrg.length === 0 ? '+ 添加组织' : '+ 继续添加' }}
</el-button>

React 实现按需加载

使用asyncComponent函数，按需引入组件。

import asyncComponent from 'hrc-async-component';

const ResourceDetail = asyncComponent(a=>require(['./detail'],a));

标签使用即可。

<ResourceDetail
    resPlatformFlag={props.resPlatformFlag}
    id={this.id}
   	cancel={this.cancelDetail.bind(this)}
/>