当项目逐渐巨大，我们开始需要提升首屏效果，组件的加载就需要做懒加载以及异步处理。

我们通过异步组件实现懒加载的效果。

异步组件

通过异步的设计方案我们将组件的加载转变为异步操作，按需加载以此增加应用加载速度，以及减少流量消耗。

官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

  components: {
    Comp1: function(resolve){require(['./Comp1.vue'],resolve)},
    Comp2: () => import("./Comp2.vue"),
    Comp3: ()=>({
      component:import('./Comp3.vue'),
      loading:import('./Comp1.vue'),
      error:import('./Comp1.vue'),
      delay:200,
      timeout:3000
    }),
  },

从Comp1到Comp3依次使用了异步组件的三种写法，第一种时已经过时的写法，第二种为主流使用方式，第三种为最新的写法,功能性强。以上写法目前仍然支持。

我们通过异步加载的组件已经包含引入组件的操作，所以我们不需要另外引入组件，如果另外引入组件就会让我们使用异步的方案优化加载速度没有意义了。

同时异步组件设计上内置了组件缓存。

异步组件和路由是设计下的一套组合方案，互相配合发挥单文件的巨大效能。

SPA

SPA即single page app，单页面应用。