vue 组件异步加载实践

背景

随着系统需求的多次迭代，核心页面被不断赋能，包含的子组件也随之增加。终于在最近一个常规版本上线后，业务方开始反应页面加载速度变慢了。我知道是时候开始考虑页面加载的性能问题了。

现状

系统的核心页面是一个给一线电销作业人员使用的工作台，如下图

工作台包含了很多子组件，都是直接引入，然后立刻注册成为局部组件


我们借助浏览器Network工具看看打开工作台页面时加载了哪些文件。

整个工作台页面被打包成一个1.debug.js文件，注意此时文件大小是2.0MB，这里面包含了所有import的子组件代码。但并不是所有的子组件都需要在打开页面的时候就加载进来的，如工作台上代客下单功能相关的子组件。
有没有方法可以将首屏不需要的子组件拆分出来，后续再完成加载呢？这样就可以提高首屏的加载速度了