异步组件的使用

https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

我们知道VUE构建的是一个单页面应用，那么就会导致其首屏加载慢。那么我们可以使用异步组件让webpack分chunk使得页面

1.普通的加载

我们先来看一下普通的加载是怎样

1.1 加载的组件：

1.2 静态加载：

注意此时为“import List from ‘./List’”是静态加载的

1.3 结果：

点击按钮显示“这是一个列表的内容”，但是发现控制台没有新的JS加载，也就是说早已经加载好了

2. 异步组件

2.1 简单使用

使用webpack（不能使用变量引入） + es2022 动态引入（import）

注意里面的注释可以修改chunkName，可查看控制台

发现结果变了

2.2 更细致的写法

定制异步组件的加载中和错误

（1）定义

错误组件和加载组件也需要定义，这里不多赘述

（2）引入

3. 其它方法

以上方法使用的是webpackh2.0和es2020import()方法，此外还可以使用工厂函数来定义组件，

也就是异步组件开头介绍的方法，但这不是推荐的

Vue.component('async-example', function (resolve, reject) {
    //可以像服务器获取，根据实际需要决定
    
    //模拟异步获取
  setTimeout(function () {

    // 向 `resolve` 回调传递组件定义 data template
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})