记录一次Vue项目性能优化

摘要

记录一下Vue项目的优化经历，如有新的问题会补充文档……

优化背景

客户测试环境(使用客户全量数据)发现页面加载过慢，客户侧把浏览器控制台network耗时超过2秒API全量抽出转交定位优化

问题发现

在问题定位中发现几类问题(排除PostgreSQL数据库问题)

一. Vue组件API重复调用

1. 问题描述
   多个组件中存在共用的select选择框且select中数据量在万条以上，各个组件中并未封装统一的VueX state统一处理，而是在每个子组件中各自调用从而造成多余的API调用。
2. 处理方式
   封装统一VueX state数据，在父组件中统一调用处理，子组件中在computed中通过…mapGetters获取数据
3. 子组件数据交由父组件处理需要注意父子组件加载顺序

	Vue父子组件加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

    父子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated

 	父子父子销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

二. Promise中封装多个API调用

6. 问题描述
   Actions代码中Promise对象中存在多个API调用，但是在组件中仅仅使用一个API数据，造成无用的API调用

7. actions代码

 actions: {
    async getMst({ commit, rootGetters }) {
      const facilityCd = rootGetters["user/getFacilityCd"];
      await Promise.all([
        getMstPersonalUser(commit, facilityCd),
        getMstJob(commit, facilityCd)
      ]);
    }
  },

7. Promise中方法调用

async function getMstPersonalUser(commit, facilityCd) {
  const responseUser = await ApiHelper.get(`/mstInfo/mstPersonalUser`, {
    facility_cd: facilityCd
  });
  commit("setMstPersonalUser", responseUser.data);
}

async function getMstJob(commit, facilityCd) {
  const responseJob = await ApiHelper.get(
    `/master_maintenance/mst_user/mst_job/${facilityCd}`
  );
  commit("setMstJob", responseJob.data);
}

4. mutations代码

mutations: {
    setMstPersonalUser(state, mstPersonalUser) {
      state.mstPersonalUser = mstPersonalUser;
    },
    setMstJob(state, mstJob) {
      state.mstJob = mstJob;
    }
  }

5. state数据

state: {
    mstPersonalUser: [],
    mstJob: []
  },
  getters: {
    mstPersonalUser({ mstPersonalUser }) {
      return mstPersonalUser;
    },
    mstJob({ mstJob }) {
      return mstJob;
    }
  },

6. 在调用getMst组件中仅仅使用了mstJob且mstPersonalUser数据量在3万左右
7. 处理方式
   在actions中添加一个方法仅仅获取mstJob数据

async getMstJobData({commit, rootGetters}){
      const facilityCd = rootGetters["user/getFacilityCd"];
      await getMstJob(commit, facilityCd)
    }

三. Java代码反复查询

Java代码复用其他方法执行数据筛选中执行多次查询以及在for循环中查询数据