perf: 路由懒加载

2020-08-24 18:42:35 +08:00 · 2020-08-24 18:42:35 +08:00 · 62899cbd22
parent cc3f2a68e1
commit 62899cbd22
6 changed files with 201 additions and 208 deletions
--- a/frontend/src/business/components/api/router.js
+++ b/frontend/src/business/components/api/router.js
@ -0,0 +1,43 @@
+import MsProject from "@/business/components/project/MsProject";
+
+export default {
+  path: "/api",
+  name: "api",
+  redirect: "/api/home",
+  components: {
+    content: () => import(/* webpackChunkName: "api" */ '@/business/components/api/ApiTest')
+  },
+  children: [
+    {
+      path: 'home',
+      name: 'fucHome',
+      component: () => import(/* webpackChunkName: "api" */ '@/business/components/api/home/ApiTestHome'),
+    },
+    {
+      path: "test/:type",
+      name: "ApiTestConfig",
+      component: () => import(/* webpackChunkName: "api" */ '@/business/components/api/test/ApiTestConfig'),
+      props: (route) => ({id: route.query.id})
+    },
+    {
+      path: "test/list/:projectId",
+      name: "ApiTestList",
+      component: () => import(/* webpackChunkName: "api" */ '@/business/components/api/test/ApiTestList'),
+    },
+    {
+      path: "project/:type",
+      name: "fucProject",
+      component: MsProject,
+    },
+    {
+      path: "report/list/:testId",
+      name: "ApiReportList",
+      component: () => import(/* webpackChunkName: "api" */ '@/business/components/api/report/ApiReportList'),
+    },
+    {
+      path: "report/view/:reportId",
+      name: "ApiReportView",
+      component: () => import(/* webpackChunkName: "api" */ '@/business/components/api/report/ApiReportView'),
+    }
+  ]
+}
--- a/frontend/src/business/components/common/head/ShowAll.vue
+++ b/frontend/src/business/components/common/head/ShowAll.vue
@ -1,28 +1,29 @@
 <template>
  <el-menu-item :index="this.index" @click="changeRoute">
    <font-awesome-icon :icon="['fa', 'list-ul']"/>
-    <span>{{$t('commons.show_all')}}</span>
+    <span>{{ $t('commons.show_all') }}</span>
  </el-menu-item>
 </template>

 <script>
-  export default {
-    name: "MsShowAll",
-    props: {
-      index: String
-    },
-    methods: {
-      changeRoute() {
-        // 解决在列表页面点击 显示全部 无效的问题（点击显示全部后改变路由）
+export default {
+  name: "MsShowAll",
+  props: {
+    index: String
+  },
+  methods: {
+    changeRoute() {
+      // 解决在列表页面点击 显示全部 无效的问题（点击显示全部后改变路由）
+      if (this.$route.path === this.index) {
        this.$router.replace({path: this.index, query: {type: 'all'}});
-        window.location.reload();
      }
    }
  }
+}
 </script>

 <style scoped>
-  svg + span {
-    padding-left: 5px;
-  }
+svg + span {
+  padding-left: 5px;
+}
 </style>
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@ -1,27 +1,11 @@
 import Vue from "vue";
 import VueRouter from 'vue-router'
 import RouterSidebar from "./RouterSidebar";
-import EditPerformanceTestPlan from "../../performance/test/EditPerformanceTestPlan";
-import PerformanceTestPlan from "../../performance/test/PerformanceTestPlan";
-import MsProject from "../../project/MsProject";
-import PerformanceChart from "../../performance/report/components/PerformanceChart";
-import PerformanceTestReport from "../../performance/report/PerformanceTestReport";
-import ApiTest from "../../api/ApiTest";
-import PerformanceTest from "../../performance/PerformanceTest";
-import ApiTestConfig from "../../api/test/ApiTestConfig";
-import PerformanceTestHome from "../../performance/home/PerformanceTestHome";
-import ApiTestList from "../../api/test/ApiTestList";
-import ApiTestHome from "../../api/home/ApiTestHome";
-import PerformanceReportView from "../../performance/report/PerformanceReportView";
-import ApiReportView from "../../api/report/ApiReportView";
-import TrackHome from "../../track/home/TrackHome";
-import TestPlan from "../../track/plan/TestPlan";
-import TestPlanView from "../../track/plan/view/TestPlanView";
-import TestCase from "../../track/case/TestCase";
-import TestTrack from "../../track/TestTrack";
-import ApiReportList from "../../api/report/ApiReportList";
 import axios from "axios";
 import Setting from "@/business/components/settings/router";
+import API from "@/business/components/api/router";
+import Performance from "@/business/components/performance/router";
+import Track from "@/business/components/track/router";

 Vue.use(VueRouter);

@ -35,158 +19,12 @@ const router = new VueRouter({
      }
    },
    Setting,
-    {
-      path: "/api",
-      name: "api",
-      redirect: "/api/home",
-      components: {
-        content: ApiTest
-      },
-      children: [
-        {
-          path: 'home',
-          name: 'fucHome',
-          component: ApiTestHome,
-        },
-        {
-          path: "test/:type",
-          name: "ApiTestConfig",
-          component: ApiTestConfig,
-          props: (route) => ({id: route.query.id})
-        },
-        {
-          path: "test/list/:projectId",
-          name: "ApiTestList",
-          component: ApiTestList
-        },
-        {
-          path: "project/:type",
-          name: "fucProject",
-          component: MsProject
-        },
-        {
-          path: "report/list/:testId",
-          name: "ApiReportList",
-          component: ApiReportList
-        },
-        {
-          path: "report/view/:reportId",
-          name: "ApiReportView",
-          component: ApiReportView
-        }
-      ]
-    },
-    {
-      path: "/performance",
-      name: "performance",
-      redirect: "/performance/home",
-      components: {
-        content: PerformanceTest
-      },
-      children: [
-        {
-          path: 'home',
-          name: 'perHome',
-          component: PerformanceTestHome,
-        },
-        {
-          path: 'test/create',
-          name: "createPerTest",
-          component: EditPerformanceTestPlan,
-        },
-        {
-          path: "test/edit/:testId",
-          name: "editPerTest",
-          component: EditPerformanceTestPlan,
-          props: {
-            content: (route) => {
-              return {
-                ...route.params
-              }
-            }
-          }
-        },
-        {
-          path: "test/:projectId",
-          name: "perPlan",
-          component: PerformanceTestPlan
-        },
-        {
-          path: "project/:type",
-          name: "perProject",
-          component: MsProject
-        },
-        {
-          path: "report/:type",
-          name: "perReport",
-          component: PerformanceTestReport
-        },
-        {
-          path: "chart",
-          name: "perChart",
-          component: PerformanceChart
-        },
-        {
-          path: "report/view/:reportId",
-          name: "perReportView",
-          component: PerformanceReportView
-        }
-      ]
-    },
-    {
-      path: "/track",
-      name: "track",
-      redirect: "/track/home",
-      components: {
-        content: TestTrack
-      },
-      children: [
-        {
-          path: 'home',
-          name: 'trackHome',
-          component: TrackHome,
-        },
-        {
-          path: 'case/create',
-          name: 'testCaseCreate',
-          component: TestCase,
-        },
-        {
-          path: 'case/:projectId',
-          name: 'testCase',
-          component: TestCase,
-        },
-        {
-          path: 'case/edit/:caseId',
-          name: 'testCaseEdit',
-          component: TestCase,
-        },
-        {
-          path: "plan/:type",
-          name: "testPlan",
-          component: TestPlan
-        },
-        {
-          path: "plan/view/:planId",
-          name: "planView",
-          component: TestPlanView
-        },
-        {
-          path: "plan/view/edit/:caseId",
-          name: "planViewEdit",
-          component: TestPlanView
-        },
-        {
-          path: "project/:type",
-          name: "trackProject",
-          component: MsProject
-        }
-      ]
-    }
+    API,
+    Performance,
+    Track,
  ]
 });

-
 router.beforeEach((to, from, next) => {
  //解决localStorage清空，cookie没失效导致的卡死问题
  if (!localStorage.getItem('Admin-Token')) {
--- a/frontend/src/business/components/performance/router.js
+++ b/frontend/src/business/components/performance/router.js
@ -0,0 +1,67 @@
+import MsProject from "@/business/components/project/MsProject";
+
+const PerformanceTest = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/PerformanceTest')
+const PerformanceTestHome = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/home/PerformanceTestHome')
+const EditPerformanceTestPlan = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/test/EditPerformanceTestPlan')
+const PerformanceTestPlan = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/test/PerformanceTestPlan')
+const PerformanceTestReport = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/report/PerformanceTestReport')
+const PerformanceChart = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/report/components/PerformanceChart')
+const PerformanceReportView = () => import(/* webpackChunkName: "performance" */ '@/business/components/performance/report/PerformanceReportView')
+
+export default {
+  path: "/performance",
+  name: "performance",
+  redirect: "/performance/home",
+  components: {
+    content: PerformanceTest
+  },
+  children: [
+    {
+      path: 'home',
+      name: 'perHome',
+      component: PerformanceTestHome,
+    },
+    {
+      path: 'test/create',
+      name: "createPerTest",
+      component: EditPerformanceTestPlan,
+    },
+    {
+      path: "test/edit/:testId",
+      name: "editPerTest",
+      component: EditPerformanceTestPlan,
+      props: {
+        content: (route) => {
+          return {
+            ...route.params
+          }
+        }
+      }
+    },
+    {
+      path: "test/:projectId",
+      name: "perPlan",
+      component: PerformanceTestPlan
+    },
+    {
+      path: "project/:type",
+      name: "perProject",
+      component: MsProject
+    },
+    {
+      path: "report/:type",
+      name: "perReport",
+      component: PerformanceTestReport
+    },
+    {
+      path: "chart",
+      name: "perChart",
+      component: PerformanceChart
+    },
+    {
+      path: "report/view/:reportId",
+      name: "perReportView",
+      component: PerformanceReportView
+    }
+  ]
+}
--- a/frontend/src/business/components/settings/router.js
+++ b/frontend/src/business/components/settings/router.js
@ -1,86 +1,72 @@
-import Setting from "@/business/components/settings/Setting";
-import User from "@/business/components/settings/system/User";
-import Organization from "@/business/components/settings/system/Organization";
-import OrganizationMember from "@/business/components/settings/organization/OrganizationMember";
-import OrganizationWorkspace from "@/business/components/settings/organization/OrganizationWorkspace";
-import ServiceIntegration from "@/business/components/settings/organization/ServiceIntegration";
-import PersonSetting from "@/business/components/settings/personal/PersonSetting";
-import ApiKeys from "@/business/components/settings/personal/ApiKeys";
-import Member from "@/business/components/settings/workspace/WorkspaceMember";
-import SystemWorkspace from "@/business/components/settings/system/SystemWorkspace";
-import TestResourcePool from "@/business/components/settings/system/TestResourcePool";
-import SystemParameterSetting from "@/business/components/settings/system/SystemParameterSetting";
-import TestCaseReportTemplate from "@/business/components/settings/workspace/TestCaseReportTemplate";
-
 const requireContext = require.context('@/business/components/xpack/', true, /router\.js$/)

 export default {
  path: "/setting",
  name: "Setting",
  components: {
-    content: Setting
+    content: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/Setting')
  },
  children: [
    {
      path: 'user',
-      component: User,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/system/User'),
      meta: {system: true, title: 'commons.user'}
    },
    {
      path: 'organization',
-      component: Organization,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/system/Organization'),
      meta: {system: true, title: 'commons.organization'}
    },
    {
      path: 'systemworkspace',
-      component: SystemWorkspace,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/system/SystemWorkspace'),
      meta: {system: true, title: 'commons.workspace'}
    },
    {
      path: 'testresourcepool',
-      component: TestResourcePool,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/system/TestResourcePool'),
      meta: {system: true, title: 'commons.test_resource_pool'}
    },
    {
      path: 'systemparametersetting',
-      component: SystemParameterSetting,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/system/SystemParameterSetting'),
      meta: {system: true, title: 'commons.system_parameter_setting'}
    },
    ...requireContext.keys().map(key => requireContext(key).system),
    {
      path: 'organizationmember',
-      component: OrganizationMember,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/organization/OrganizationMember'),
      meta: {organization: true, title: 'commons.member'}
    },
    {
      path: 'organizationworkspace',
-      component: OrganizationWorkspace,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/organization/OrganizationWorkspace'),
      meta: {organization: true, title: 'commons.workspace'}
    },
    {
      path: 'serviceintegration',
-      component: ServiceIntegration,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/organization/ServiceIntegration'),
      meta: {organization: true, title: 'organization.service_integration'}
    },
    {
      path: 'member',
-      component: Member,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/workspace/WorkspaceMember'),
      meta: {workspace: true, title: 'commons.member'}
    },
    {
      path: 'testcase/report/template',
      name: 'testCaseReportTemplate',
-      component: TestCaseReportTemplate,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/workspace/TestCaseReportTemplate'),
      meta: {workspace: true, title: 'test_track.plan_view.report_template'}
    },
    {
      path: 'personsetting',
-      component: PersonSetting,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/personal/PersonSetting'),
      meta: {person: true, title: 'commons.personal_setting'}
    },
    {
      path: 'apikeys',
-      component: ApiKeys,
+      component: () => import(/* webpackChunkName: "setting" */ '@/business/components/settings/personal/ApiKeys'),
      meta: {person: true, title: 'commons.api_keys'}
    },

--- a/frontend/src/business/components/track/router.js
+++ b/frontend/src/business/components/track/router.js
@ -0,0 +1,58 @@
+import MsProject from "@/business/components/project/MsProject";
+
+const TestTrack = () => import(/* webpackChunkName: "track" */ '@/business/components/track/TestTrack')
+const TrackHome = () => import(/* webpackChunkName: "track" */ '@/business/components/track/home/TrackHome')
+const TestCase = () => import(/* webpackChunkName: "track" */ '@/business/components/track/case/TestCase')
+const TestPlan = () => import(/* webpackChunkName: "track" */ '@/business/components/track/plan/TestPlan')
+const TestPlanView = () => import(/* webpackChunkName: "track" */ '@/business/components/track/plan/view/TestPlanView')
+
+export default {
+  path: "/track",
+  name: "track",
+  redirect: "/track/home",
+  components: {
+    content: TestTrack
+  },
+  children: [
+    {
+      path: 'home',
+      name: 'trackHome',
+      component: TrackHome,
+    },
+    {
+      path: 'case/create',
+      name: 'testCaseCreate',
+      component: TestCase,
+    },
+    {
+      path: 'case/:projectId',
+      name: 'testCase',
+      component: TestCase,
+    },
+    {
+      path: 'case/edit/:caseId',
+      name: 'testCaseEdit',
+      component: TestCase,
+    },
+    {
+      path: "plan/:type",
+      name: "testPlan",
+      component: TestPlan
+    },
+    {
+      path: "plan/view/:planId",
+      name: "planView",
+      component: TestPlanView
+    },
+    {
+      path: "plan/view/edit/:caseId",
+      name: "planViewEdit",
+      component: TestPlanView
+    },
+    {
+      path: "project/:type",
+      name: "trackProject",
+      component: MsProject
+    }
+  ]
+}