-
异步组件:定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存。
-
Vue实现按需加载,结合使用webpack的代码分割功能进行。定义为异步加载的组件,在打包的时候,会单独打包成单独的js文件存储在static/js内,在调用的时候使用ajax请求回来插入到html。
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)}
/>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!