vue异步组件

异步组件和路由懒加载的原理比较像，路由懒加载是将router.js中的路由通过懒加载的方式引入进来从而提升性能，异步组件是那些没有当做路由去使用的组件，如果需要提升这部分组件加载的性能，需要将它的引入方式由同步改为异步。

 

1、定义一个List.vue：

<template>
  <div>这是一个列表的内容</div>
</template>

2、同步引入：

<template>
  <div id="app">
    <button @click="isShow=!isShow">按钮</button>
    <List v-if="isShow"></List>
  </div>
</template>
<script>
import List from '@/components/List'
export default {
  data() {
    return { isShow: false }
  },
  components: { List }
}
</script>

此时，即使没有触发按钮让List组件加载进来，它也是在后台被加载了，所以当切换List的显示状态时netWork没有变化

 

3、改为异步引入：

<template>
  <div id="app">
    <button @click="isShow=!isShow">按钮</button>
    <List v-if="isShow"></List>
  </div>
</template>
<script>
// import List from '@/components/List'
export default {
  data() {
    return { isShow: false }
  },
  components: {
    List: () => import(/* webpackChunkName: 'List' */ '@/components/List')
  }
}
</script>

此时，初始化的时候并没有去加载List组件，它是在用户点击按钮后才加载进来，节约了性能

 

4、异步组件工厂函数

Loading.vue：

<template>
  <div>loading...</div>
</template>

Error.vue：

<template>
  <div>error!!!</div>
</template>

使用：

<template>
  <div id="app">
    <button @click="isShow=!isShow">按钮</button>
    <AsyncList v-if="isShow"></AsyncList>
  </div>
</template>
<script>
import Loading from '@/components/Loading'
import Error from '@/components/Error'
// 异步组件工厂函数
const AsyncList = () => ({
  component: import(/* webpackChunkName: 'List' */ '@/components/List'),
  loading: Loading,
  error: Error,
  delay: 200,
  timeout: 3000
})
export default {
  data() {
    return { isShow: false }
  },
  components: { AsyncList }
}
</script>