vue 页面懒加载,vue懒加载的原理及实现

　　本文主要介绍Vue如何通过懒加载提高页面响应速度。对Vue性能感兴趣的同学可以参考一下。

概述

　　项目的目的是通过透视表和Excel公式分析公司的经营数据。但是集成后页面在开发环境中运行流畅，大量数据加载处理速度快。但是生产发布后，用户每次打开页面时，加载时间都比开发阶段有所减少。经查，速度较慢是由于发布包的vendor.js较大造成的，每次加载需要300毫秒左右。因为小的Vue项目没有划分模块，所有的代码都直接打包到厂商，发布包随着新功能的集成变大。

　　既然找到了原因，就开始优化。在前端，当需要加载大量资源时，一般采用惰性加载来优化效率。

什么是懒加载？

　　延迟加载也称为延迟加载。网页响应时，不立即请求资源，然后在页面加载或按需响应时加载资源，提高页面响应速度，节省服务器资源。网页常用的懒加载就是图片的懒加载。像淘宝这种多图页面，如果等所有图片下载完再响应，不一定会导致页面加载。JS资源的加载也是如此。大JS的加载会造成JS阻塞，页面会暂停响应。因此，可以通过按需加载来提高页面首屏的加载速度。

　　总结了具体的优化步骤之后，就开始优化吧！

开始优化

　　首先是项目环境：Vue 2.6。

　　开发环境：Vue-cli 4.5 TypeScript 3.9

划分业务模块

　　通过路由的异步加载模块加快首屏和其他页面的加载速度，并在Vue路由器中以懒加载模式配置webExcel模块。配置完成后，webExcel组件会根据指定的webpackChunkName打包成一个单独的文件，只有在访问webExcel路由时才会加载。这样，在访问主页和关于页面时，将不会加载webExcel资源。

懒加载路由配置

　　打包访问页面，第一屏秒开，直接访问about依然秒开。但是在查看网络请求时，发现访问首页时，请求的是about和web Excel的资源。经过调查发现，vue-cli在页面中使用预加载和预取预加载机制，可以在不影响当前页面加载的情况下预加载后续页面所需的资源，提高用户体验。这里对预取的资源做了明确的注释，以供演示。

　　(暂时禁用预取预加载)

　　打开路由延迟。加载后，主页上不加载about和webExcel。

　　(家庭网络请求)

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

　　(webExcel页面网络请求)

在线Excel组件懒加载

　　进一步优化插件页面的打开速度。

　　为了优化路由加载，为了提高用户体验，进一步优化webExcel页面，开启组件的懒加载，在需要设计器组件的时候再加载。

　　打开异步组件的方式类似于路由。只需直接配置导入组件，替换原来的静态导入即可。

　　(组件延迟加载)

　　在这里，我们一步到位地使用AsyncComponent配置，以便在加载组件时给用户一个提示。

　　(页面模板)

　　(异步组件延迟加载)

　　在页面上，是否显示设计器组件是由displayDesigner属性控制的，settimeout 3秒后会加载并显示设计器组件。加载时，LoadingComponent显示加载状态。

　　从网络请求中可以看到，webExcel在加载3秒后开始请求设计器资源，请求过程中显示LoadingComponent，请求后显示Desinger组件。

开启gzip压缩，加速资源请求速度

　　为了进一步加速资源请求，您可以打开服务器的gizp压缩。目前大部分浏览器都支持gzip，你可以打开服务器的gzip功能。服务器在传输资源之前对其进行压缩。

　　网络请求中会出现以下内容，表示支持gzip

　　接受-编码：gzip，deflate，br

　　Vue-cli可以在打包时预先用gzip打包资源，这样服务器就可以直接返回打包的资源，而不需要再次打包。使用compression-webpack-plugin插件可以在打包时直接生成gz压缩文件。gzip的配置可以根据具体的部署情况来设置。

总结

　　经过以上优化，首屏加载资源只需要Vue基础组件和首页组件，首屏加载速度恢复到原来的200ms。其他不使用设计器组件的页面也不需要加载资源。同时，设计器组件加载一次，其他后续页面的复用组件不需要再次加载。

　　这是一些关于Vue路由和组件惰性加载的配置。但是，懒加载并不是万能的，还是要根据实际需要来决定是否使用。

　　以上是Vue通过懒加载提升页面响应速度的细节。更多关于Vue通过懒加载提高响应速度的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。