背景

在项目开发过程中，项目会越来越复杂，引入的组件也会越来越多，为了得到更好的响应速度，需要进行性能优化。

实现

程序变卡很大的一个原因是因为一次性需要渲染的组件太多，因此我们让组件 按需加载 就可以实现性能大幅提升，主要实现方式有以下两种：

一、延迟加载组件

正常是这样加载组件的：

<script>
  import MainTabBar from "./components/MainTabBar";
  export default {
    components: {
      MainTabBar
    }
  }
</script>

延迟加载是使用ES6的语法进行加载：

<script>
  export default {
    components: {
      MainTabBar : () => import('./components/MainTabBar')
    }
  }
</script>

这样就实现了延迟加载组件。

二、有条件地加载一个异步组件

有的时候，我们希望在触发某个事件之后才进行组件加载（比如按下按钮或在文本上悬停时加载组件），这时我们可以借助 v-if 有条件地渲染组件：

<template>
  <div>
    <button @click="show = true">show MainTabBar</button>
    <div v-if="show"> 
      <MainTabBar> </MainTabBar>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      show: false
    }),
    components: {
      MainTabBar: () => import('./components/MainTabBar')
    }
  }
</script>