对于前端代码工程来说，为了提高后期代码的维护性，可以把复用的代码分割成小一些的代码块并提取，提取出来的这些代码块称作为组件。但对于组件的引用可以分为同步与异步加载方式：

页面同步加载组件

前端页面初始化加载时，即使当前页面<component-one>组件在初始化时没有展示，该页面也会同步加载<component-one>组件，代码如下：

<template>
  <div>
    <button class="btn" @click="clickMe">组件展示</button>
    <div v-if="show">
　　  <component-one></component-one>
    </div>
  </div>
</template>
<script>
import ComponentOne from './component-one'
export default {
  components:{
    ComponentOne
  },
  data(){
    return{
      show:false
    }
  },
  methods: {
    clickMe() {
      this.show = !this.show
    }
  },
};
</script>

异步组件

对于前端页面来说，并不是所有组件需要在页面初始化时就加载，只有在其被需要的时候才从服务器加载一个模块。对于Vue来说，允许开发者以工厂函数的方式定义组件，工厂函数会异步解析组件定义。

Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

工厂函数应用如下：

<template>
  <div>
    <button class="btn" @click="clickMe">组件展示</button>
    <div v-if="show">
　　  <component-one></component-one>
    </div>
  </div>
</template>
<script>
const ComponentOne = Vue.component(
  'component-one', 
  // 工厂函数
  function (resolve, reject) {
    // 获取组件（此处直接创建的组件，只做演示使用，如何获取组件取决于具体开发）
    const data = {
      template: '<div>异步加载组件!</div>'
    }
    // 向 `resolve` 回调传递组件定义
    resolve(data)
    // 如果发生错误可以通过reject返回错误
    // reject(message)
  }
)
export default {
  components:{
    ComponentOne
  },
  data(){
    return{
      show:false
    }
  },
  methods: {
    clickMe() {
      this.show = !this.show
    }
  },
};
</script>

Vue推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

对于以上两种异步加载的方式，可能实际开发过程中显得不太好理解，我们可以在工厂函数中返回一个 Promise，具体操作如下：

<template>
  <div>
    <button class="btn" @click="clickMe">异步组件</button>
    <div v-if="show">
　　  <component-one></component-one>
    </div>
  </div>
</template>
<script>
export default {
  components:{
    ComponentOne: ()=>import('./component-one')
  },
  data(){
    return{
      show:false
    }
  },
  methods: {
    clickMe() {
      this.show = !this.show
    }
  },
};
</script>

处理异步组件加载状态

对于异步组件在加载过程中，如果需要处理加载状态，可以设定异步组件工厂函数返回一个如下格式的对象：

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./component-one.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

实际应用如下：

<template>
  <div>
    <button class="btn" @click="clickMe">异步组件</button>
    <div v-if="show">
　　  <component-one></component-one>
    </div>
  </div>
</template>
<script>
import loading from "./loading";
import ErroCom from "./ErroCom";
const ComponentOne = ()=>({
  component:import("./component-one.vue"),
  loading: loading, //loading组件
  error:ErroCom,//错误展示
  delay:200,//延迟
  timeout:3000,//如果3秒没有加载，就出现error组件
})
export default {
  components:{
    ComponentOne
  },
  data(){
    return{
      show:false
    }
  },
  methods: {
    clickMe() {
      this.show = !this.show
    }
  },
};
</script>