dexteryao 发表于 2020-12-11 17:55:30

SpreadJS及在线表格编辑器Vue组件加载优化

本帖最后由 Clark.Pan 于 2022-5-9 15:16 编辑

SpreadJS V14 新版在线表格编辑器可以放便的集成到Vue等框架,只需要一个组件或者几行代码就能在现有工程中集成在线Excel的功能。如果项目不做任何配置集成设计器组件,会让框架大的发布包增大,导致页面首屏加载变慢。下面以Vue 2为例介绍如何进行设计器加载优化。
示例环境: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组件。
      


      首页Home网络请求
      清理网络请求记录,点击Web Excel,访问webExcel页面,此时会请求webExcel资源并展示组件。
      
      
webExcel页面网络请求
      
      实现了路由懒加载,还可使用组件懒加载,进一步优化webExcel页面的体验。将在线表格编辑器封装到Designer组件中,WebExcel页面异步加载这个组件。
      
封装Deisgner组件
      在WebExcel页面中使用Designer组件,通过diplayDesigner控制是否显示。
      
引入Designer组件
      
      WebExcel中使用AsyncComponent的方式引入Designer组件,页面加载完成3秒后设置diplayDesigner为true来展示Designer组件,Designer 加载是使用LoadingComponent提示用户正在loading。
      
WebExcel中异步组件实现
      
      
      
      
      可以从网络请求中看到,webExcel加载完3秒后开始请求designer资源,请求时显示LoadingComponent,请求完毕展示Desinger 组件。
      
      只要Designer的资源加载一次后,后续如何切换路由或者其他页面也使用了Designer,都不会再次加载了。路由懒加载并不一定使用,如果Designer主要功能,那么懒加载Designer就没有必要了。
      
      Vue-cli在打包时还使用了preload和prefetch预加载机制,前面示例中为了演示清晰我注释了相关配置。
      
资源预加载
      
      首页实际请求,部分资源为预加载。
      
      除了以上内容还可以开启服务器gzip压缩传输减少懒加载请求时间。

随机用户 发表于 2021-7-1 08:42:54

请问有没有这个案例的demo分享一下呀

Clark.Pan 发表于 2021-7-1 09:17:24

https://www.grapecity.com.cn/developer/spreadjs/editor

这里页面中的立即下载就可以下载到,本文介绍的就是我们新版的在线表格编辑器的功能。
下载安装包中的sample中有VUE相关的案例。

Derrick.Jiao 发表于 2021-7-1 09:24:59

随机用户 发表于 2021-7-1 08:42
请问有没有这个案例的demo分享一下呀

请参考这个demo

ttnkh21 发表于 2021-11-10 11:41:20

框架用的angular12 启用了 路由懒加载 自定义预加载策略,但是进入 有设计器的页面时,还是会卡顿一下,尤其是性能不好的电脑,有办法进一步优化,提高用户体验吗?如先渲染表格,然后渲染功能区

Derrick.Jiao 发表于 2021-11-10 15:02:25

ttnkh21 发表于 2021-11-10 11:41
框架用的angular12 启用了 路由懒加载 自定义预加载策略,但是进入 有设计器的页面时,还是会卡顿一下,尤 ...

可以参考附件的angular demo
页: [1]
查看完整版本: SpreadJS及在线表格编辑器Vue组件加载优化