[Pref 0000] 优化标准可配置首页模块的加载性能

src/main.ts

@@ -66,9 +66,10 @@ async function bootstrap() {
 
   // 注册第三方组件
   await registerThirdComp(app);
-
+  // console.time('debug'); // 49842 ms - 13552 ms
   // 当路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
   await router.isReady();
+  // console.timeEnd('debug');
 
   initModalWorker();
 

src/views/vent/home/configurable/components/content.vue

@@ -256,48 +256,49 @@
 <script lang="ts" setup>
   import { computed, defineAsyncComponent, ref } from 'vue';
   import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
   import { clone } from 'lodash-es';
   import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  import SelectCs from './preset/SelectCs.vue';
-  import MiniBoardNew from './detail/MiniBoard-New.vue';
-  import Partition from './preset/partition.vue';
-  import SelectorDualChart from './preset/selectorDualChart.vue';
-  import RadioLabel from './preset/radioLabel.vue';
-  import ButtonList from './preset/buttonList.vue';
-  import NitrogenBtnList from './preset/nitrogenBtnList.vue';
-  import cardList from './preset/cardList.vue';
-  import generalList from './preset/generalList.vue';
-  import GateBoard from '../belt/components/detail/gateBoard.vue';
-  import fireGateBoard from '../belt/components/detail/fireGateBoard.vue';
-  import PersonPositioning from './preset/PersonPositioning.vue';
+
+  const MiniBoard = defineAsyncComponent(() => import('./detail/MiniBoard.vue'));
+  const TimelineList = defineAsyncComponent(() => import('./detail/TimelineList.vue'));
+  const TimelineListNew = defineAsyncComponent(() => import('./detail/TimelineListNew.vue'));
+  const CustomList = defineAsyncComponent(() => import('./detail/CustomList.vue'));
+  const CustomGallery = defineAsyncComponent(() => import('./detail/CustomGallery.vue'));
+  const ComplexList = defineAsyncComponent(() => import('./detail/ComplexList.vue'));
+  const GalleryList = defineAsyncComponent(() => import('./detail/GalleryList.vue'));
+  const CustomTable = defineAsyncComponent(() => import('./detail/CustomTable.vue'));
+  const CustomChart = defineAsyncComponent(() => import('./detail/CustomChart.vue'));
+  const BlastDelta = defineAsyncComponent(() => import('../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue'));
+  const QHCurve = defineAsyncComponent(() => import('./preset/QHCurve.vue'));
+  const MeasureDetail = defineAsyncComponent(() => import('./preset/MeasureDetail.vue'));
+  const CustomTabs = defineAsyncComponent(() => import('./preset/CustomTabs.vue'));
+  const AIChat = defineAsyncComponent(() => import('/@/components/AIChat/MiniChat.vue'));
+  const DeviceAlarm = defineAsyncComponent(() => import('./preset/DeviceAlarm.vue'));
+  const SelectCs = defineAsyncComponent(() => import('./preset/SelectCs.vue'));
+  const MiniBoardNew = defineAsyncComponent(() => import('./detail/MiniBoard-New.vue'));
+  const Partition = defineAsyncComponent(() => import('./preset/partition.vue'));
+  const SelectorDualChart = defineAsyncComponent(() => import('./preset/selectorDualChart.vue'));
+  const RadioLabel = defineAsyncComponent(() => import('./preset/radioLabel.vue'));
+  const ButtonList = defineAsyncComponent(() => import('./preset/buttonList.vue'));
+  const NitrogenBtnList = defineAsyncComponent(() => import('./preset/nitrogenBtnList.vue'));
+  const cardList = defineAsyncComponent(() => import('./preset/cardList.vue'));
+  const generalList = defineAsyncComponent(() => import('./preset/generalList.vue'));
+  const GateBoard = defineAsyncComponent(() => import('../belt/components/detail/gateBoard.vue'));
+  const fireGateBoard = defineAsyncComponent(() => import('../belt/components/detail/fireGateBoard.vue'));
+  const PersonPositioning = defineAsyncComponent(() => import('./preset/PersonPositioning.vue'));
   // ==================== 新增皮带巷火灾监测组件 ====================
-  import SensorStatusPanel from './belt/SensorStatusPanel.vue';
-  import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
-  import WarningResultList from './belt/WarningResultList.vue';
-  import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
+  const SensorStatusPanel = defineAsyncComponent(() => import('./belt/SensorStatusPanel.vue'));
+  const FireSensorAnalysis = defineAsyncComponent(() => import('./belt/FireSensorAnalysis.vue'));
+  const WarningResultList = defineAsyncComponent(() => import('./belt/WarningResultList.vue'));
+  const VehicleCOAnalysis = defineAsyncComponent(() => import('./belt/VehicleCOAnalysis.vue'));
   // 首页组件
-  import CustomListBelt from './belt/CustomListBelt.vue';
-  import ComplexListBelt from './belt/ComplexListBelt.vue';
-  import ComplexList1Belt from './belt/ComplexList1Belt.vue';
-  import CustomTableBelt from './belt/CustomTableBelt.vue';
-  import SprayControl from './belt/SprayControl.vue';
-  import CameraList from './belt/CameraList.vue';
-  import CameraListTest from './belt/CameraListTest.vue';
+  const CustomListBelt = defineAsyncComponent(() => import('./belt/CustomListBelt.vue'));
+  const ComplexListBelt = defineAsyncComponent(() => import('./belt/ComplexListBelt.vue'));
+  const ComplexList1Belt = defineAsyncComponent(() => import('./belt/ComplexList1Belt.vue'));
+  const CustomTableBelt = defineAsyncComponent(() => import('./belt/CustomTableBelt.vue'));
+  const SprayControl = defineAsyncComponent(() => import('./belt/SprayControl.vue'));
+  const CameraList = defineAsyncComponent(() => import('./belt/CameraList.vue'));
+  const CameraListTest = defineAsyncComponent(() => import('./belt/CameraListTest.vue'));
 
   const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));