转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
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或者静态资源的方式引入。 - <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 页面会造成资源浪费。
- var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'))
-
- vardesigner=newGC.Spread.Sheets.Designer.Designer(
- document.getElementById('ssDesigner'),/**设计器容器*/
- designerConfig,//自定制配置*/,
- undefined/**默认workbook对象，可以不设置*/
- );
当然也可以在组件加载时动态注入script引用，监听loaded再进行操作，但是这样的操作很是繁琐，所以我们在这里继续介绍第二种方案。 路由懒加载+组件懒加载Vue Route和Component都提供了懒加载的方式，实现按需异步加载。
上面代码中将About和WebExcel两个View配置为了懒加载模式，这两个组件会按照指定的webpackChunkName单独打包，加载首页进入Home页面的时候不会加载webExcel，只有当访问webExcel路由的时候才请求，而且请求一次之后，后续再访问也不会再请求了。这样首屏加载只需要加载Vue框架资源和Home组件。 （首页Home网络请求）
清理网络请求记录，点击Web Excel，访问webExcel页面，此时会请求webExcel资源并展示组件。
（webExcel页面网络请求）
上述的全部过程我们实现了路由的懒加载，除此之外我们还可以使用组件懒加载，进一步优化webExcel页面的体验。我们可以将在线表格编辑器封装在Designer组件中，使用WebExcel页面异步加载这个组件。 （封装Deisgner组件）
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中组件加载优化的思路。
大家可以自行下载试试
SpreadJS | 下载试用纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。 如下资源列表，可以为您评估产品提供帮助：
| 
陕公网安备：61019002000258 |
隐私政策 |
网站地图
