vue 组件异步加载实践

逃离我推掉我的手 2022-05-14 04:07 175阅读 0赞

## 背景 ##

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

## 现状 ##

系统的核心页面是一个给一线电销作业人员使用的工作台，如下图  
![这里写图片描述][70]  
工作台包含了很多子组件，都是直接引入，然后立刻注册成为局部组件  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
我们借助浏览器Network工具看看打开工作台页面时加载了哪些文件。  
![这里写图片描述][70 3]  
整个工作台页面被打包成一个1.debug.js文件，注意此时文件大小是2.0MB，这里面包含了所有import的子组件代码。但并不是所有的子组件都需要在打开页面的时候就加载进来的，如工作台上代客下单功能相关的子组件。  
有没有方法可以将首屏不需要的子组件拆分出来，后续再完成加载呢？这样就可以提高首屏的加载速度了

## vue 组件异步官方说明 ##

查询vue官网指南，提到[异步组件][Link 1]的使用：

> 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

官网给出使用es6语法注册一个异步局部组件示例如下

new Vue({
      // ...
      components: {
        'my-component': () => import('./my-async-component')
      }
    })

## 项目实践 ##

回到我的工作台页面，子组件可以采用异步加载方式引入  
![这里写图片描述][70 4]  
我们看下现在打开页面，加载的js文件  
![这里写图片描述][70 5]  
看到原来那个大小为2.0MB的`1.degug.js`文件被拆分成了`1.dubug.js`, `28.debug.js`,`27.debug.js` 三个更小的文件。注意这三个文件的大小之和是不到2.0MB的，因为工作台注册的6个异步组件，只加载了`27.debug.js`和`28.debug.js`两个，首屏没有被渲染的另外4个子组件没有被加载。

## 进一步优化 ##

到此为止，已经可以达到提高页面加载速度的目的了。但我们可以做的更彻底，让首屏不需要的子组件不要渲染出来，比如工作台代客下单Tab里的子组件，增加一个`v-if`的判断，当’代客下单’tab被激活时，控制变量才会变为`true`  
![这里写图片描述][70 6]  
![这里写图片描述][70 7]  
再来看下js文件的加载情况，打开工作台页面，又少加载了一个js文件  
![这里写图片描述][70 8]  
点击“代客下单”tab，相关`loan-apply-form`子组件的文件`28.debug.js`才被加载  
![这里写图片描述][70 9]  
这样做有两个好处：

1.  代客下单功能并不是主流程的功能，作业过程中可能根本用不到，即使在首屏异步加载了不影响页面打开速度，也是浪费网络资源。
2.  考虑这样的场景：代客下单中子组件`loan-apply-form`需要使用参数custId在其`created`钩子中获取数据初始化子组件，但custId需要等待父组件（工作台）在`created`钩子中获取数据并且在挂载到dom元素后（`mounted`）才能得到。这节的做法可以让子组件与父组件生命周期错开，避免出现子组件因父组件还没实例化完成而无法拿到参数custId的问题。

## 总结 ##

1，使用vue异步组件，可以将复杂页面的框架代码和子组件代码拆开，优先加载框架代码，显著提高页面加载速度;  
2，组织复杂页面的代码时，可以考虑对于打开首屏时不需要渲染的子组件，使用`v-if`控制其只在需要的时候被渲染。

[70]: /images/20220514/15dbbd8e03f547b29684f603a0e96234.png
[70 1]: /images/20220514/b5b4c70abc584690946bdab34168c344.png
[70 2]: /images/20220514/88e661e43bef4176bbb7a823c5c5e938.png
[70 3]: /images/20220514/b724e3ac3181475a8afce30e1a448b02.png
[Link 1]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6
[70 4]: /images/20220514/3c51a502c2554c99b5b8b355bcb97c88.png
[70 5]: /images/20220514/0c8a1ad046a94593a755d8e40ece6050.png
[70 6]: /images/20220514/d94b3b034051428d8eef7eaadeb7130b.png
[70 7]: /images/20220514/f247e70a5b9247e0a9d35fc4226d81fc.png
[70 8]: /images/20220514/7b11e042ee114b8eb719110ece2b1b77.png
[70 9]: /images/20220514/4c1a277d9b2941ee806fc2106733aab7.png