Просмотр исходного кода

perf(base-卡2b): MiniChat 内 @vue-office 三组件改 defineAsyncComponent,echarts 改 initChart 内 await import 按需加载

86132 1 неделя назад
Родитель
Сommit
308b822604
1 измененных файлов с 14 добавлено и 9 удалено
  1. 14 9
      src/components/AIChat/MiniChat.vue

+ 14 - 9
src/components/AIChat/MiniChat.vue

@@ -245,10 +245,7 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import VueOfficePdf from '@vue-office/pdf/lib/v3/vue-office-pdf.mjs';
-  import VueOfficeDocx from '@vue-office/docx/lib/v3/vue-office-docx.mjs';
-  import VueOfficeExcel from '@vue-office/excel/lib/v3/vue-office-excel.mjs';
-  import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue';
+  import { ref, onMounted, nextTick, watch, onUnmounted, defineAsyncComponent } from 'vue';
   import { SvgIcon } from '../Icon';
   import { SvgIcon } from '../Icon';
   import { Space, Button, Modal, Input, message } from 'ant-design-vue';
   import { Space, Button, Modal, Input, message } from 'ant-design-vue';
   // import AIChat from './index.vue';
   // import AIChat from './index.vue';
@@ -267,7 +264,12 @@
   import { marked } from 'marked';
   import { marked } from 'marked';
   import katex from 'katex';
   import katex from 'katex';
   import 'katex/dist/katex.min.css';
   import 'katex/dist/katex.min.css';
-  import * as echarts from 'echarts';
+  // [perf-base-v1] 卡2b: echarts 改按需动态导入(见 initChart),此处仅保留类型导入(编译期擦除,无运行时依赖)
+  import type { EChartsType } from 'echarts';
+  // [perf-base-v1] 卡2b: @vue-office 三组件改异步加载,仅 isShowDoc 预览时才会拉取 office-preview chunk
+  const VueOfficePdf = defineAsyncComponent(() => import('@vue-office/pdf/lib/v3/vue-office-pdf.mjs'));
+  const VueOfficeDocx = defineAsyncComponent(() => import('@vue-office/docx/lib/v3/vue-office-docx.mjs'));
+  const VueOfficeExcel = defineAsyncComponent(() => import('@vue-office/excel/lib/v3/vue-office-excel.mjs'));
   const TextArea = Input.TextArea; // 直接导入TextArea组件使用时打包报错
   const TextArea = Input.TextArea; // 直接导入TextArea组件使用时打包报错
   const inputText = ref(''); // 输入框内容
   const inputText = ref(''); // 输入框内容
   const refreshText = ref(''); //重新生成文本
   const refreshText = ref(''); //重新生成文本
@@ -317,16 +319,19 @@
   const validEchartsOption = ref(null);
   const validEchartsOption = ref(null);
   const optionTextRef = ref(null);
   const optionTextRef = ref(null);
   const echartsOption = ref({});
   const echartsOption = ref({});
-  let myChart: echarts.EChartsType | null = null;
+  let myChart: EChartsType | null = null;
   const chartDom = ref<HTMLDivElement | null>(null);
   const chartDom = ref<HTMLDivElement | null>(null);
   // 初始化图表
   // 初始化图表
-  const initChart = () => {
+  const initChart = async () => {
     const targetNode = document.getElementById('chart-target');
     const targetNode = document.getElementById('chart-target');
     if (!targetNode) {
     if (!targetNode) {
       console.error('目标插入节点不存在!');
       console.error('目标插入节点不存在!');
       return;
       return;
     }
     }
 
 
+    // [perf-base-v1] 卡2b: 仅在真正需要渲染图表时才动态加载 echarts
+    const echarts = await import('echarts');
+
     // 2. 创建 ECharts 容器(带唯一 id,方便后续清理)
     // 2. 创建 ECharts 容器(带唯一 id,方便后续清理)
     const chartContainer = document.createElement('div');
     const chartContainer = document.createElement('div');
     chartContainer.id = 'dynamic-echarts-container';
     chartContainer.id = 'dynamic-echarts-container';
@@ -356,7 +361,7 @@
     async (newOption) => {
     async (newOption) => {
       if (!newOption || Object.keys(newOption).length === 0) return;
       if (!newOption || Object.keys(newOption).length === 0) return;
       await nextTick(); // 等待 DOM 渲染
       await nextTick(); // 等待 DOM 渲染
-      initChart();
+      await initChart(); // [perf-base-v1] initChart 已异步化(内部动态 import echarts)
     },
     },
     { deep: true, immediate: true }
     { deep: true, immediate: true }
   );
   );
@@ -497,7 +502,7 @@
   };
   };
   const triggerChart = async () => {
   const triggerChart = async () => {
     await nextTick();
     await nextTick();
-    initChart();
+    await initChart(); // [perf-base-v1] initChart 已异步化(内部动态 import echarts)
   };
   };
   //重新生成
   //重新生成
   const refresh = () => {
   const refresh = () => {