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或者静态资源的方式引入。 引入后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页面中直接使用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预加载机制，前面示例中为了演示清晰代码中注释了相关配置。 同时我们也能看到在首页实际的请求中，一些资源是预加载内容。 总结 这样两套组合拳下来，实际应用中的发布包的内容被极大的压缩，这样两种方式同时也有效提升了首页面的加载速度。 希望本期内容介绍能带给大家一些Vue中组件加载优化的思路。 觉得内容不错点个关注再走吧~
