背景
随着系统需求的多次迭代,核心页面被不断赋能,包含的子组件也随之增加。终于在最近一个常规版本上线后,业务方开始反应页面加载速度变慢了。我知道是时候开始考虑页面加载的性能问题了。
现状
系统的核心页面是一个给一线电销作业人员使用的工作台,如下图
工作台包含了很多子组件,都是直接引入,然后立刻注册成为局部组件
我们借助浏览器Network工具看看打开工作台页面时加载了哪些文件。
整个工作台页面被打包成一个1.debug.js文件,注意此时文件大小是2.0MB,这里面包含了所有import的子组件代码。但并不是所有的子组件都需要在打开页面的时候就加载进来的,如工作台上代客下单功能相关的子组件。
有没有方法可以将首屏不需要的子组件拆分出来,后续再完成加载呢?这样就可以提高首屏的加载速度了