SpreadJS独立模块减少打包后的体积
本帖最后由 Ellia.Duan 于 2024-12-25 14:11 编辑有些用户很苦恼，我仅仅使用了SpreadJS中的数据绑定功能，为什么打包后的体积有4M左右呢（gc.spread.sheets.all包的大小）。
那么有什么办法解决呢？其实SpreadJS从很久以前就提供了独立模块，可以将all包根据模块进行拆分。
如果有用户下载了SpreadJS官网的包，会发现下载的release包就包含了这些内容，如下图所示：
那么，现在前端项目都是使用的各种框架，如vue ，react ，我们是否支持在框架中使用独立模块呢？
答案是肯定，SpreadJS在16.2.0版本就实现了npm方式进行单独的模块。
我们来看下怎么使用吧。
一、支持的打包工具
在开始前呢，先介绍下，目前支持的打包工具：
[*]WebPack
[*]Vite
[*]Rollup
[*]ESBuild
[*]Angular CLI
[*]Create React App
[*]Create Vue
二、选择模块
其次，选择需要的模块，比如我们需要数据绑定功能，需要导入哪个包呢？具体查看这篇文章：
如上图所示，我们需要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 或者yarninstall等。
那么，如何使用呢？
四、使用
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'
整个项目如下：
页:
[1]