VUE项目性能优化实践——通过懒加载提高页面响应速度在我公司开发的前端表单产品上。该项目的目的是通过数据透视表和Excel公式分析公司的各种运营数据。但是集成之后，页面在开发环境中运行流畅，大量数据的加载和处理速度非常快。但是，在生产发布后，用户每次打开页面时，加载时间都比开发阶段减少了。经查，速度变慢是由于发布包vendor.js变大所致。每次都会加载此文件。大约需要300毫秒。由于Vue小项目不分模块，所有代码直接打包到vendor中。集成新功能后，发布包变大。既然找到了原因，我们就开始优化。当前端需要加载大量资源时，我们一般会使用懒加载来优化效率。什么是延迟加载？延迟加载也称为延迟加载。网页响应时不立即请求资源，在页面加载完成或按需响应后加载资源，提高页面响应速度，节省服务器资源。网页中常用的懒加载就是图片的懒加载。对于淘宝这种多图片的页面，如果等图片全部下载完再响应申请，不一定会导致页面加载不出来。JS资源的加载也是如此。大JS的加载会导致JS阻塞，页面会出现假死停止响应的状态。因此，可以通过按需加载来提高页面首屏的加载速度。总结了具体的优化步骤，下面开始优化吧！开始优化第一个项目环境：Vue2.6开发环境：Vue-cli4.5+TypeScript3.9划分业务模块，通过路由异步加载模块，加快首屏和其他页面的加载速度。在VueRouter中配置webExcel模块为懒加载模式。配置后，webExcel组件会根据指定的webpackChunkName打包成一个单独的文件，只有访问webExcel路由时才会加载。这样访问首页和关于页面就不会加载webExcel资源了。懒加载路由配置打包发布访问页面，首屏秒开，直接访问about依然秒开。但是在查看网络请求时，发现访问首页时请求了about和webExcel的资源。经查，vue-cli利用页面中的preload和prefetch预加载机制，在不影响当前页面加载的情况下，预加载后续页面需要的资源，提升用户体验。在这里，为清楚起见，预取资源被注释掉了。（暂时禁用prefetch预加载）启用路由延迟加载后，首页不加载about和webExcel。(首页首页网络请求)清除网络请求记录，点击WebExcel，访问webExcel页面。这时候会请求webExcel资源，显示组件。（webExcel页面网络请求）在线Excel组件延迟加载，进一步优化使用插件页面打开速度优化路由加载，为提升用户体验，进一步优化webExcel页面，启用组件延迟加载，在Designer时加载需要组件。启用异步组件的方式和路由类似，直接配置导入组件即可，代替原来的静态导入。（组件的延迟加载）这里我们一步使用AsyncComponent配置，这样在加载组件的时候可以提示用户。(页面模板)(异步组件的延迟加载)在页面中，displayDesigner属性用于控制是否显示Designer组件，setTimeout3秒后会加载并显示Designer组件。LoadingComponent在加载时显示加载状态。从网络请求可以看出，webExcel加载3秒后开始请求设计器资源，请求时显示LoadingComponent，请求完成后显示Designer组件。启用gzip压缩以加速资源请求为了进一步加速资源请求，您可以在服务器上启用gizp压缩。目前大部分浏览器都支持gzip，您可以在服务器端开启gzip功能。服务器在传输资源之前压缩资源。网络请求Request中会出现如下内容，说明支持gzipAccept-Encoding：gzip,deflate,brVue-cli在打包的时候可以提前用gzip打包资源，这样服务端就可以直接返回打包好的资源，不需要打包再次。使用compression-webpack-plugin插件，打包时可以直接生成gz压缩文件。gzip的配置可以根据具体部署情况进行设置。总结经过以上优化，首屏加载资源只需要Vue基础组件和首页组件，首屏加载速度恢复到原来的200毫秒。其他不使用Designer组件的页面不需要加载资源。同时，Designer组件加载一次，后续页面无需再次加载该组件。以上就是关于Vue路由和组件懒加载的一些配置，但是懒加载并不是万能的。根据实际需要决定是否使用。延伸阅读支持Vue的电子表格组件Vue3组件开发：搭建在线表单编辑系统
