Vue中组件的使用非常方便。 你只需要引入组件的内容，十几行代码就可以解决很多问题。
在开发过程中，我们可能会使用到大量的组件elementui加载组件，包括login、header、footer、main等，但是使用太多的组件会让网站的内容变得非常庞大。 当我们打开网页时，系统需要将所有组件一次性加载，大量的请求同时出现，用户体验会特别差。
而同样的情况也出现在我们的用户身上。
在我作为技术顾问的日常生活中elementui加载组件，我一打开笔记本电脑就听到客户直接发来的截图
一个容量巨大的发布包，同时运行半天页面还是空白。 这几秒钟的漫长等待消耗了用户所有的耐心。
为了解决这些情况，我们推荐两种加载优化方法，并通过一个示例项目为您演示优化的整个过程。
Vue加载优化实战练习
下面以Vue 2为例介绍如何优化设计器加载。 示例环境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9
CDN加速
CDN不同于传统的网络访问方式。 CDN降低了用户和服务器之间的Cache层，将用户的访问请求引导到Cache节点而不是服务器源站点。 要达到这个目的，主要是通过接管DNS来实现。
在Vue中，可以通过CDN导入vue、vuex、vue-router等基础组件，并通过浏览器的异步加载以及上述组件的打包和卸载来加速。
同样，如果很多页面使用组件内容，也可以通过CDN或者静态资源引入组件资源。
引入后GC对象会挂在窗口中，可以以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对象，可以不设置*/
);当然，也可以在组件加载时动态注入脚本引用，监听加载然后进行操作，但这样的操作非常冗长，所以这里继续介绍第二种方案。
Vue Route 和 Component 都提供了延迟加载来实现按需异步加载。
上面的代码将About和WebExcel两个View配置为延迟加载模式。 这两个组件会根据指定的webpackChunkName分别进行打包。 加载主页并单步进入主页时，不会加载webExcel，只有访问webExcel路由时才会加载。 只会乞讨，乞讨一次之后，以后的访问就不会再乞讨了。 这样首屏加载只需要加载Vue框架资源和Home组件即可。
