Vue组件开发——异步组件

一、引入
我们在讲异步组件之前，我们再来回顾一下webpack打包时的分包操作。我们可以使用import()异步加载模块来实现分包操作。import函数的返回值是一个Promise，所以我们可以使用then进行下一步处理。

如下图所示为打包后的文件目录，因为我们如果同步加载math.js文件，此时就不存在中间的文件，此时当浏览器请求资源时，就会很慢。

二、vue中的异步组件
通过上面的webpack配置我们明白了为什么要进行分包操作，此时我们想一个问题，如果一个网站的页面在用户第一次浏览器时就将全部页面都下载了，这样会出现一个问题，就是首屏加载过慢。
如果我们的项目过大了，对于某些组件我们想要异步加载(也就是分包处理)，此时Vue给我们提供了一个函数defineAsyncComponent
defineAsyncComponent可以传入两种类型的参数，第一个是函数，该函数需要返回Promise，第二个参数是一个对象类型，对异步函数进行配置。
第一种写法：函数写法