只要十几行代码！看看Vue组件加载优化如何成就电子表格

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

Vue中组件的使用十分方便，只需要引入组件内容，十几行代码就可以解决很多问题。

在开发过程中我们可能会用到大量组件，包括login,header,footer,main等等，但是使用过多组件会使网站内容变得无比庞大，当我们在打开网页的时候，系统需要将所有的组件一次性加载上来，大量请求同时涌现，用户的使用体验就会非常差。

而同样的情况同样出现在了我们的用户身上。

作为一名技术顾问的日常，刚打开电脑，就看到客户直接发来一张截图

一个容量巨大的发布包，同时运行后过了半天页面的依旧一片空白，这漫长的几秒钟等待消耗了用户的全部耐心。

为了解决这种情况，我们推荐两种加载优化方式，并用实例项目为大家演示优化的整个过程。

Vue加载优化实战演练

下面以Vue 2为例介绍如何进行设计器加载优化，示例环境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9

CDN加速

CDN与传统的网络访问方式不同，CDN是在用户和服务器之间增加 Cache 层，将用户的访问请求引导到Cache 节点而不是服务器源站点，要实现这一目的，主要是通过接管DNS 实现。

在Vue中可以将基础组件vue、vuex、vue-router等组件采用cdn引入，通过浏览器的异步加载，以及打包排出以上组件来加速。

同样，如果很多页面都使用了组件内容，也可以将组件资源通过cdn或者静态资源的方式引入。

1. <font size="1">        <scriptsrc="lib/spreadjs/scripts/gc.spread.sheets.all.14.0.1.min.js"type="text/javascript"></script>
   
2.         <scriptsrc="lib/spreadjs/scripts/interop/gc.spread.excelio.14.0.1.min.js"type="text/javascript"></script>
   
3.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.print.14.0.1.min.js"type="text/javascript"></script>
   
4.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.pdf.14.0.1.min.js"type="text/javascript"></script>
   
5.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.charts.14.0.1.min.js"type="text/javascript"></script>
   
6.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.shapes.14.0.1.min.js"type="text/javascript"></script>
   
7.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.pivot.pivottables.14.0.1.min.js"type="text/javascript"></script>
   
8.         <scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.calcengine.languagepackages.14.0.1.min.js"type="text/javascript"></script>
   
9.         <scriptsrc="lib/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.14.0.1.min.js"type="text/javascript"></script>
   
10.         <scriptsrc="lib/spreadjs/designer/scripts/gc.spread.sheets.designer.resource.cn.14.0.1.min.js"type="text/javascript"></script>
    
11.         <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 页面会造成资源浪费。

1.    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'))
   
2.         
   
3.         vardesigner=newGC.Spread.Sheets.Designer.Designer(
   
4.         document.getElementById('ssDesigner'),/**设计器容器*/
   
5.         designerConfig,//自定制配置*/,
   
6.         undefined/**默认workbook对象，可以不设置*/
   
7.         );
   

复制代码

当然也可以在组件加载时动态注入script引用，监听loaded再进行操作，但是这样的操作很是繁琐，所以我们在这里继续介绍第二种方案。

路由懒加载+组件懒加载

Vue Route和Component都提供了懒加载的方式，实现按需异步加载。

上面代码中将About和WebExcel两个View配置为了懒加载模式，这两个组件会按照指定的webpackChunkName单独打包，加载首页进入Home页面的时候不会加载webExcel，只有当访问webExcel路由的时候才请求，而且请求一次之后，后续再访问也不会再请求了。这样首屏加载只需要加载Vue框架资源和Home组件。

（首页Home网络请求）

清理网络请求记录，点击Web Excel，访问webExcel页面，此时会请求webExcel资源并展示组件。

（webExcel页面网络请求）

上述的全部过程我们实现了路由的懒加载，除此之外我们还可以使用组件懒加载，进一步优化webExcel页面的体验。我们可以将在线表格编辑器封装在Designer组件中，使用WebExcel页面异步加载这个组件。

（封装Deisgner组件）

（引入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预加载机制，前面示例中为了演示清晰代码中注释了相关配置。

同时我们也能看到在首页实际的请求中，一些资源是预加载内容。

总结

这样两套组合拳下来，实际应用中的发布包的内容被极大的压缩，这样两种方式同时也有效提升了首页面的加载速度。

希望本期内容介绍能带给大家一些Vue中组件加载优化的思路。

本次实践中所使用的案例内容地址：https://gcdn.grapecity.com.cn/showtopic-84565-1-2.html

大家可以自行下载试试

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：

- 预约技术顾问，享受 30 天免费金牌服务

- 申请临时部署授权，用于内部测试

- 了解 SpreadJS 在线表格编辑器