轉(zhuǎn)帖|使用教程|編輯:龔雪|2021-07-12 09:57:12.303|閱讀 508 次
概述:SpreadJS最新版在線表格編輯器可以輕松集成到Vue等框架,本文主要為大家介紹Vue組件的加載優(yōu)化。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
SpreadJS v14 新版在線表格編輯器可以放便的集成到Vue等框架,只需要一個(gè)組件或者幾行代碼就能在現(xiàn)有工程中集成在線Excel的功能。如果項(xiàng)目不做任何配置集成設(shè)計(jì)器組件,會(huì)讓框架大的發(fā)布包增大,導(dǎo)致頁(yè)面首屏加載變慢。下面以Vue 2為例介紹如何進(jìn)行設(shè)計(jì)器加載優(yōu)化。
示例環(huán)境:Vue 2.6、Vue-cli 4.5 + TypeScript 3.9
推薦兩種做法,可以根據(jù)實(shí)際情況選擇使用:
在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è)置*/ );
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,兼容 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)載自
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: