纯前端表格控件SpreadJS使用教程 – Vue组件的加载优化

示例环境：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组件。