vue 异步加载组件

先说一般的组件方式嘛

<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就加载好了，如果项目大，加载多就影响使用了

改善：

1. 去掉上面代码的 import Good from “./good”
2. 修改components

components: {
	//这里可以改变在控制台中的js文件名字，success就是引入的文件名，默认是0
    Good: () => import (/* webpackChunkName： 'success' */"./good")
  },

再次改善
这里我设置了组件加载失败，以及加载过程中的Loading显示，

1. 点击按钮 会加载Load组件，等delay(延迟)1秒后加载出引入的good组件
2. 若是3秒后没加载成功，就会显示引入的error组件
3. 加载失败这个情况可以是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>