SpreadJS独立模块减少打包后的体积

收藏

本帖最后由 Ellia.Duan 于 2024-12-25 14:11 编辑

有些用户很苦恼，我仅仅使用了SpreadJS中的数据绑定功能，为什么打包后的体积有4M左右呢（gc.spread.sheets.all包的大小）。

那么有什么办法解决呢？其实SpreadJS从很久以前就提供了独立模块，可以将all包根据模块进行拆分。
如果有用户下载了SpreadJS官网的包，会发现下载的release包就包含了这些内容，如下图所示：
image.png379135131.png

那么，现在前端项目都是使用的各种框架，如vue ，react ，我们是否支持在框架中使用独立模块呢？

答案是肯定，SpreadJS在16.2.0版本就实现了npm方式进行单独的模块。
image.png370585021.png

我们来看下怎么使用吧。
一、支持的打包工具
在开始前呢，先介绍下，目前支持的打包工具：

WebPack
Vite
Rollup
ESBuild
Angular CLI
Create React App
Create Vue

二、选择模块
其次，选择需要的模块，比如我们需要数据绑定功能，需要导入哪个包呢？具体查看这篇文章：
image.png341188353.png

如上图所示，我们需要common包、core包、bindings包。
三、设置package.json
那么，package.json文件怎么设置呢？

"dependencies": {
"@grapecity-software/spread-common": "17.1.10",
"@grapecity-software/spread-sheets-core": "17.1.10",
"@grapecity-software/spread-sheets-bindings": "17.1.10"
},

复制代码

接下来，执行npm install 或者yarn install等。
那么，如何使用呢？
四、使用
1、引入依赖：

import GC from "@grapecity-software/spread-common";
import "@grapecity-software/spread-sheets-core";
import "@grapecity-software/spread-sheets-bindings";
import "@grapecity-software/spread-sheets-cell-types";
import "@grapecity-software/spread-common/styles/gc.spread.sheets.excel2013white.css"

复制代码

2、添加dom容器

return (
<div className="app">
<div id="ss" className="spread-container"></div>
</div>
);

复制代码

3、初始化dom

useEffect(() => {
let spread = new GC.Spread.Sheets.Workbook("ss",{sheetCount:2})
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var sheet = spread.getActiveSheet();
sheet.name("Custom binding");
sheet.autoGenerateColumns = false;
var products = getProducts(100);
sheet.setDataSource(products);
var colInfos = [
{name: "id", displayName: "ID"},
{name: "name", displayName: "Name", size: 100},
{name: "line", displayName: "Line", size: 80},
{name: "color", displayName: "Color"},
{name: "price", displayName: "Price", formatter: "0.00", size: 80},
{name: "cost", displayName: "Cost", formatter: "0.00", size: 80},
{name: "weight", displayName: "Weight", formatter: "0.00", size: 80},
{
name: "discontinued",
displayName: "Discontinued",
cellType: new GC.Spread.Sheets.CellTypes.CheckBox(),
size: 100
},
{name: "rating", displayName: "Rating"}
];
sheet.bindColumns(colInfos);
spread.resumePaint();
}, []);

复制代码

上述代码，在useEffect中，初始化了spread、sheet对象，然后进行了setDataSource 数据绑定。
注意，此时不能使用'@grapecity-software/spread-sheets-react'或者'@grapecity-software/spread-sheets-vue'

整个项目如下：

react_core2.zip (491.98 KB, 下载次数: 1)

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

SpreadJS独立模块减少打包后的体积

0 个回复

SpreadJS 认证

SpreadJS 高级认证