【17.1.4】【求助：表格设计器的快速加载方案】

求助：表格设计器的快速加载方案


【问题描述】第一次加载页面耗时太长 （至少10s的加载时长）
【求助】没有比较好的加载方案，让表格控件先展示到页面上，然后再按需加载剩余的依赖组件
【目标】无延迟、或最多2秒的延迟
【当前代码】

1. import * as GC from "@grapecity-software/spread-sheets";
   
2. import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   
3. import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
   
4. import "@grapecity-software/spread-sheets-print";
   
5. import "@grapecity-software/spread-sheets-shapes";
   
6. import "@grapecity-software/spread-sheets-slicers";
   
7. import "@grapecity-software/spread-sheets-pivot-addon";
   
8. import "@grapecity-software/spread-sheets-tablesheet";
   
9. import "@grapecity-software/spread-sheets-formula-panel";
   
10. import "@grapecity-software/spread-sheets-io";
    
11. import '@grapecity-software/spread-sheets-resources-zh';
    
12. import '@grapecity-software/spread-sheets-designer-resources-cn';
    
13. import "@grapecity-software/spread-sheets-designer";
    
14. import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";

复制代码

1、首先要确认下您的问题是：Designer的资源加载慢？
如果不用Designer，光用SpreadJS，如下引用，是否还存在页面加载慢的问题？
import * as GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import '@grapecity-software/spread-sheets-resources-zh';


2、需要了解下您的业务场景，是否必须使用Designer，以及日常会用到哪些功能？

1.  有只有spreadjs的业务场景。加载速度会稍快一些；晚点我再用你给的引入方式去精简，看是否能更快速加载

2. 业务场景必须用designer；日常功能：基础的公式、表格的基础编辑

1、在使用Designer的过程中：
如果没有用到形状，可以不引入charts包，
如果没有引入数据透视表，可以不引用pivot-addon包，
如果没有用到切片器，可以不引用slicers包
如果没有导入导出需求，可以不用print ,pdf，sheet-io包
如果没有用到集算表，可以不用tablesheet包。

在上述过程中，如果遇到Designer报错，可以将相关菜单删除。如下代码删除了”插入sheet“的菜单

1. let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
2. 
   
3.             //通过路径 找到 想要删除的按钮
   
4.             let insertSheetBtn = designerConfig.ribbon[0].buttonGroups[6].commandGroup.children[0].children[5]
   
5.             console.log(insertSheetBtn)
   
6.             designerConfig.ribbon[0].buttonGroups[6].commandGroup.children[0].children.splice(5,1)
   
7. 
   
8. 
   
9.             designer.setConfig(designerConfig)

复制代码

2、如果加载慢的话，可以考虑cdn技术。
3、如果控制用户权限，不让其使用Designer顶部菜单，最好不用Designer插件，而是用SpreadJS。

Ellia.Duan 发表于 2024-10-21 16:46
1、在使用Designer的过程中：
如果没有用到形状，可以不引入charts包，
如果没有引入数据透视表，可以不 ...

谢谢大佬，我尝试一下

Ellia.Duan 发表于 2024-10-21 16:46
1、在使用Designer的过程中：
如果没有用到形状，可以不引入charts包，
如果没有引入数据透视表，可以不 ...

把代码做了删减

1. import * as GC from "@grapecity-software/spread-sheets";
   
2. import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   
3. import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
   
4. import "@grapecity-software/spread-sheets-io";
   
5. import '@grapecity-software/spread-sheets-resources-zh';
   
6. import '@grapecity-software/spread-sheets-designer-resources-cn';
   
7. import "@grapecity-software/spread-sheets-designer";
   
8. import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";
   

复制代码

删减前:

删减后：



主js/css文件体积的确变小了，但幅度不大，对加载时间影响不是很大。

您好，控制台的截图只看到了chart包的加载时间，是否可以看下下图中几个包的加载时间



2、看到您截图中的charts包要加载13秒时间？ 这个时间看来是有点长的。所以想了解下，是加载SpreadJS相关包慢，还是其他插件也慢？

如果只是加载SpreadJS相关包慢，是否可以提供一下可以复现问题的demo项目，我们来排查下问题。

Ellia.Duan 发表于 2024-10-21 18:16
您好，控制台的截图只看到了chart包的加载时间，是否可以看下下图中几个包的加载时间

1. 根据文件体积排序的截图：



红框标注的，主要加载的都是spreadjs组件。
其中代码里并没有显示的引用 echarts，但仍旧去加载。



2. ExcelEditor.vue文件的主要的代码:

1. <template>
   
2.   <div v-if="isEmpty() && !canCreate" class="pms-excel-empty">
   
3.     <el-empty description="暂无计划" />
   
4.     <div>
   
5.       <el-button v-if="!isProtectedRef" @click="handleCreate" type="primary">创建</el-button>
   
6.     </div>
   
7.   </div>
   
8.   <div v-show="!isEmpty() || canCreate" id="gc-designer-container">
   
9.     <gc-spread-sheets-designer
   
10.         :styleInfo="styleInfo"
    
11.         :config="config"
    
12.         :spreadOptions="spreadOptions"
    
13.         @designerInitialized="designerInitialized"/>
    
14.   </div>
    
15. </template>
    
16. <script setup>
    
17. 
    
18. import * as GC from "@grapecity-software/spread-sheets";
    
19. import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    
20. import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    
21. import "@grapecity-software/spread-sheets-io";
    
22. import '@grapecity-software/spread-sheets-resources-zh';
    
23. import '@grapecity-software/spread-sheets-designer-resources-cn';
    
24. import "@grapecity-software/spread-sheets-designer";
    
25. import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";

复制代码

在 ExcelEditor.vue 代码中，大部分加载的都是spreadjs组件。
大致是 vite 的 build 逻辑，将组件一起合并打包到 ExcelEditor-98fdab90.js ，ExcelEditor-f7b977ae.css 这两个文件中了，所以在控制台看不到其他组件的加载

加载速度与项目配置有很大关系，如vite配置等，如果您只提供了 ExcelEditor.vue，无法复现项目运行加载问题，需要您提供一个完整的，可以运行的vue项目，删除不需要的相关代码。上传上来，我们进一步调研。