学习实践 Vue 异步组件

一、引入
在介绍异步组件之前，有必要再次回顾webpack在打包过程中所涉及的分包机制。通过采用import()语法实现模块的异步加载方式，可以有效完成分包操作。由于import函数返回的是一个Promise对象，因此能够借助then方法进行后续的处理步骤。

如下图所示，这是打包完成后的文件目录结构。由于在同步加载math.js文件的情况下，中间的文件将不复存在，因此当浏览器请求相关资源时，加载速度将会变得非常缓慢。

二、vue中的异步组件
通过前文所述的webpack配置设置，我们已经了解了进行分包操作的必要性。此时，我们不禁思考，若一个网站在用户首次访问时便将所有页面内容一次性下载下来，将会导致首屏加载速度变得异常缓慢。
当项目规模较大时，针对部分组件实现异步加载（即分包处理）显得尤为必要。此时，Vue为我们提供了