Vue异步组件

异步组件简介

所谓的异步组件就是通过import或者require导入的vue组件。

// 例如：
const componentA = import('@/components/componentA.vue');
// 或者 
const componentA = require('@/components/componentA.vue');

异步组件的好处

可以避免页面一加载时就去加载全部的组件，从而导致页面访问时间变长的问题。使用异步加载组件后，只有当需要某个组件时才会去加载需要的组件。

异步加载组件案例

<template>
  <div id="app">
    <AsyncComponent></AsyncComponent>
  </div>
</template>

<script>
export default ({
  components: {
    AsyncComponent: () => import('@/components/asyncComponent.vue')
  }
})
</script>