SpreadJS v14 新版在線表格編輯器可以放便的集成到Vue等框架，只需要一個(gè)組件或者幾行代碼就能在現(xiàn)有工程中集成在線Excel的功能。如果項(xiàng)目不做任何配置集成設(shè)計(jì)器組件，會(huì)讓框架大的發(fā)布包增大，導(dǎo)致頁(yè)面首屏加載變慢。下面以Vue 2為例介紹如何進(jìn)行設(shè)計(jì)器加載優(yōu)化。

點(diǎn)擊獲取SpreadJS工具下載

示例環(huán)境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9

推薦兩種做法，可以根據(jù)實(shí)際情況選擇使用：

1. CDN加速

在Vue中可以將基礎(chǔ)組件vue、vuex、vue-router等組件采用cdn引入，通過(guò)瀏覽器的異步加載，以及打包排出以上組件來(lái)加速。

同樣，如果很多頁(yè)面都使用了SpreadJS 或者 Designer，也可以將SpreadJS 資源通過(guò)cdn或者靜態(tài)資源的方式引入。

<font size="1"> <scriptsrc="lib/spreadjs/scripts/gc.spread.sheets.all.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/interop/gc.spread.excelio.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.print.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.pdf.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.charts.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.shapes.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.pivot.pivottables.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.calcengine.languagepackages.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/designer/scripts/gc.spread.sheets.designer.resource.cn.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/designer/scripts/gc.spread.sheets.designer.all.14.0.1.min.js"type="text/javascript"></script></font>

引入后GC對(duì)象會(huì)掛在window，在通過(guò)new Workbook 和Designer的方式就可以初始化表格或者設(shè)計(jì)器了。

使用此種方式不需要集成SpreadJS對(duì)Vue支持的封裝，按照原生JS的使用方式即可，比較方便。訪問(wèn)所有頁(yè)面都要加載資源，對(duì)于直接訪問(wèn)沒(méi)有使用SpreadJS 頁(yè)面會(huì)造成資源浪費(fèi)。當(dāng)然也可以在組件加載時(shí)動(dòng)態(tài)注入script引用，監(jiān)聽loaded再進(jìn)行操作，這樣就有些繁瑣不如直接使用方案2了。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'))

vardesigner=newGC.Spread.Sheets.Designer.Designer(
document.getElementById('ssDesigner'),/**設(shè)計(jì)器容器*/
designerConfig,//自定制配置*/,
undefined/**默認(rèn)workbook對(duì)象，可以不設(shè)置*/
);

2. 路由懶加載+組件懶加載

Vue Route和Component都提供了懶加載的方式，實(shí)現(xiàn)按需異步加載。

上面代碼中將About和WebExcel兩個(gè)View配置為了懶加載模式，這兩個(gè)組件會(huì)按照指定的webpackChunkName單獨(dú)打包，加載半島外圍網(wǎng)上直營(yíng)進(jìn)入Home頁(yè)面的時(shí)候不會(huì)加載webExcel，只有當(dāng)訪問(wèn)webExcel路由的時(shí)候才請(qǐng)求，而且請(qǐng)求一次之后，后續(xù)再訪問(wèn)也不會(huì)再請(qǐng)求了。這樣首屏加載只需要加載Vue框架資源和Home組件。

清理網(wǎng)絡(luò)請(qǐng)求記錄，點(diǎn)擊Web Excel，訪問(wèn)webExcel頁(yè)面，此時(shí)會(huì)請(qǐng)求webExcel資源并展示組件。

實(shí)現(xiàn)了路由懶加載，還可使用組件懶加載，進(jìn)一步優(yōu)化webExcel頁(yè)面的體驗(yàn)。將在線表格編輯器封裝到Designer組件中，WebExcel頁(yè)面異步加載這個(gè)組件。

在WebExcel頁(yè)面中使用Designer組件，通過(guò)diplayDesigner控制是否顯示。

WebExcel中使用AsyncComponent的方式引入Designer組件，頁(yè)面加載完成3秒后設(shè)置diplayDesigner為true來(lái)展示Designer組件，Designer 加載是使用LoadingComponent提示用戶正在loading。

可以從網(wǎng)絡(luò)請(qǐng)求中看到，webExcel加載完3秒后開始請(qǐng)求designer資源，請(qǐng)求時(shí)顯示LoadingComponent，請(qǐng)求完畢展示Desinger 組件。

只要Designer的資源加載一次后，后續(xù)如何切換路由或者其他頁(yè)面也使用了Designer，都不會(huì)再次加載了。路由懶加載并不一定使用，如果Designer主要功能，那么懶加載Designer就沒(méi)有必要了。

Vue-cli在打包時(shí)還使用了preload和prefetch預(yù)加載機(jī)制，前面示例中為了演示清晰我注釋了相關(guān)配置。

半島外圍網(wǎng)上直營(yíng)實(shí)際請(qǐng)求，部分資源為預(yù)加載。

除了以上內(nèi)容還可以開啟服務(wù)器gzip壓縮傳輸減少懶加載請(qǐng)求時(shí)間。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購(gòu)、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國(guó)軟件行業(yè)協(xié)會(huì)認(rèn)定為“中國(guó)優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報(bào)、 類 Excel 報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景需求，極大的降低企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

本文轉(zhuǎn)載自