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

點擊獲取SpreadJS工具下載

示例環境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9

推薦兩種做法，可以根據實際情況選擇使用：

1. CDN加速

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

同樣，如果很多頁面都使用了SpreadJS 或者 Designer，也可以將SpreadJS 資源通過cdn或者靜態資源的方式引入。

<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對象會掛在window，在通過new Workbook 和Designer的方式就可以初始化表格或者設計器了。

使用此種方式不需要集成SpreadJS對Vue支持的封裝，按照原生JS的使用方式即可，比較方便。訪問所有頁面都要加載資源，對于直接訪問沒有使用SpreadJS 頁面會造成資源浪費。當然也可以在組件加載時動態注入script引用，監聽loaded再進行操作，這樣就有些繁瑣不如直接使用方案2了。

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

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

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

Vue Route和Component都提供了懶加載的方式，實現按需異步加載。

上面代碼中將About和WebExcel兩個View配置為了懶加載模式，這兩個組件會按照指定的webpackChunkName單獨打包，加載金喜正規買球進入Home頁面的時候不會加載webExcel，只有當訪問webExcel路由的時候才請求，而且請求一次之后，后續再訪問也不會再請求了。這樣首屏加載只需要加載Vue框架資源和Home組件。

清理網絡請求記錄，點擊Web Excel，訪問webExcel頁面，此時會請求webExcel資源并展示組件。

實現了路由懶加載，還可使用組件懶加載，進一步優化webExcel頁面的體驗。將在線表格編輯器封裝到Designer組件中，WebExcel頁面異步加載這個組件。

在WebExcel頁面中使用Designer組件，通過diplayDesigner控制是否顯示。

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

可以從網絡請求中看到，webExcel加載完3秒后開始請求designer資源，請求時顯示LoadingComponent，請求完畢展示Desinger 組件。

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

Vue-cli在打包時還使用了preload和prefetch預加載機制，前面示例中為了演示清晰我注釋了相關配置。

金喜正規買球實際請求，部分資源為預加載。

除了以上內容還可以開啟服務器gzip壓縮傳輸減少懶加載請求時間。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自