Vue异步组件加载（代码+注释）

<template>
  <div class="home">
    <!-- 点击切换组件 -->
    <button @click="onClick">点击切换组件</button>
    <!-- 使用is动态组件切换 -->
    <component :is="componentId"></component>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // 按需引入组件
    // 这是异步加载的，不是用就不会加载
    FooShow(resolve){
      require(["../components/Foo"],resolve)
    },
    BarShow(resolve){
      require(["../components/Bar"],resolve)
    }
  },
  data() {
      return {
        // is绑定的就是这个key值，这个value值是在components里面的组件名
        componentId:"FooShow",
      }
    },
    methods: {
      onClick(){
        // 这里切换的时候就会加载这个组件
        this.componentId = "BarShow"
      }
    },
};
</script>

使用异步组件可以解决Vue项目首屏加载慢的问题