先说一般的组件方式嘛
<template>
<div>
<button @click="show">点我</button>
<div v-if="isShow">
<Good></Good>
</div>
</div>
</template>
<script>
import Good from "./good"
export default {
data() {
return {
isShow: false
};
},
components: {
Good
},
methods: {
show() {
this.isShow = !this.isShow;
}
}
};
</script>
然后你在网页打开控制台,这个0.js就是我要引入的Good组件,下面说到怎么改这个文件名
无论你怎么点击这个按钮,js都没变化,也就是说第一次进入这个页面js就加载好了,如果项目大,加载多就影响使用了
改善:
- 去掉上面代码的 import Good from “./good”
- 修改components
components: {
//这里可以改变在控制台中的js文件名字,success就是引入的文件名,默认是0
Good: () => import (/* webpackChunkName: 'success' */"./good")
},
再次改善
这里我设置了组件加载失败,以及加载过程中的Loading显示,
- 点击按钮 会加载Load组件,等delay(延迟)1秒后加载出引入的good组件
- 若是3秒后没加载成功,就会显示引入的error组件
- 加载失败这个情况可以是timeout的时间大于delay的时间就好
<template>
<div>
<button @click="show">点我</button>
<div v-if="isShow">
<Good></Good>
</div>
</div>
</template>
<script>
import Load from "./loading "
import Error from "./error"
// 这里的Good就是组件名,发生更改组件名也要更改
const Good = () => ({
component: import('./good'),
loading:Load,
error:Error,
delay: 1000,
timeout: 3000
})
export default {
data() {
return {
isShow: false
};
},
components: {
Good
},
methods: {
show() {
this.isShow = !this.isShow;
}
}
};
</script>