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

收藏

本帖最后由华晟于 2024-10-21 15:17 编辑

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

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

import * as GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets-print";
import "@grapecity-software/spread-sheets-shapes";
import "@grapecity-software/spread-sheets-slicers";
import "@grapecity-software/spread-sheets-pivot-addon";
import "@grapecity-software/spread-sheets-tablesheet";
import "@grapecity-software/spread-sheets-formula-panel";
import "@grapecity-software/spread-sheets-io";
import '@grapecity-software/spread-sheets-resources-zh';
import '@grapecity-software/spread-sheets-designer-resources-cn';
import "@grapecity-software/spread-sheets-designer";
import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";

复制代码

Ellia.Duan · Ellia.Duan

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；日常功能：基础的公式、表格的基础编辑

Ellia.Duan · Ellia.Duan

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

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

let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
//通过路径找到想要删除的按钮
let insertSheetBtn = designerConfig.ribbon[0].buttonGroups[6].commandGroup.children[0].children[5]
console.log(insertSheetBtn)
designerConfig.ribbon[0].buttonGroups[6].commandGroup.children[0].children.splice(5,1)
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包，
如果没有引入数据透视表，可以不 ...

把代码做了删减

import * as GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets-io";
import '@grapecity-software/spread-sheets-resources-zh';
import '@grapecity-software/spread-sheets-designer-resources-cn';
import "@grapecity-software/spread-sheets-designer";
import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";

复制代码

删减前:

删减后：

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

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-10-21 18:17 编辑

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

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

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

华晟 · 华晟

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

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

image.png820628967.png

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

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

<template>
<div v-if="isEmpty() && !canCreate" class="pms-excel-empty">
<el-empty description="暂无计划" />
<div>
<el-button v-if="!isProtectedRef" @click="handleCreate" type="primary">创建</el-button>
</div>
</div>
<div v-show="!isEmpty() || canCreate" id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"/>
</div>
</template>
<script setup>
import * as GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets-io";
import '@grapecity-software/spread-sheets-resources-zh';
import '@grapecity-software/spread-sheets-designer-resources-cn';
import "@grapecity-software/spread-sheets-designer";
import GcSpreadSheetsDesigner from "@grapecity-software/spread-sheets-designer-vue";

复制代码

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

Ellia.Duan · Ellia.Duan

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

		自动登录	找回密码
密码			立即注册

[处理中] 【17.1.4】【求助：表格设计器的快速加载方案】

8 个回复

SpreadJS 认证

SpreadJS 高级认证