vue大型项目高性能优化----想说爱你真的不容易

一、背景

  目前公司的电子合同采用表单设计器+合同业务配合实现，做了半年多后终于上线，但是下边员工普遍反映卡顿，甚至卡死，爆栈。尤其是新增和修改合同页面，因为这部分数据量大，逻辑复杂，很容易崩溃，所以决定进行性能优化。

二、业务场景介绍

  先来了解一下我们是怎么实现：

  1. 因为我们公司合同变换频繁，条款之间还有逻辑，所以做了个基础服务（说白了就是组件库），为合同提供模板

  2. 表单设计器作为基础服务，打包成了组件库，嵌入到合同项目，包括合同生成组件（拖拽生成合同模板）和合同预览组件（加载数据库中的合同模板数据）

  3. 合同项目有一个模块管理页面，可以对多个模板进行维护，比如可以选择启用哪个模板。

  4. 合同的管理员负责维护模板，可以用表单设计器拖拽生成合同模板，提交后落入数据库，每个合同类型可以同时启用一个模板。

  5. 最终下边员工用的就是启用的模板（尤其是这部门卡顿）

下面是电子合同的宏观泳道图：

三、页面介绍

1. 合同模板管理页
   
2. 新增模板页面
   
3. 新建合同页面
   
4. 合同填写页面
   

  好了，基本的业务逻辑和页面就介绍这么多，特别卡顿的页面就是第四个页面，下面我们分析一下卡顿的原因。</