扫码阅读
手机扫码阅读
项目启动页加载太慢?和松哥一起掌握几个优化方案!
64 2024-11-28
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
文章来源:
江南一点雨
扫码关注公众号
松哥正在录制TienChin项目视频,采用的是Spring Boot+Vue3技术栈,项目是前后端分离的SPA形式,旨在通过视频帮助开发者实现一个完成率超过90%的项目。
面对前后端分离的SPA项目普遍存在的首屏加载慢的问题,松哥提出了优化方案,包括UI组件按需加载、路由懒加载、组件重复打包和gzip压缩。其中UI组件按需加载和gzip压缩是较常用的解决方案。
在ElementUI按需加载部分,松哥首先展示了一般情况下,如何引入ElementUI会导致不必要的组件也被打包进项目,造成资源浪费。通过执行"vue-cli-service build --report"命令生成报告后,松哥展示了优化前后的对比,指出按需引入组件后文件大小有所减少,但效果有限。
针对gzip压缩,提供了两种部署思路——将前端编译打包后拷贝到后端部署,或者前后端分离部署使用Nginx。对于服务端配置,只需在后端application.yml中添加相应配置即可开启gzip压缩。而前端配置则涉及到Nginx的动态压缩和静态压缩两种方式。动态压缩适用于每次请求都进行压缩的场景,而静态压缩则是提前生成.gz格式的文件,请求时直接返回。
松哥还指出,通过这些优化操作,首屏加载速度提升了5倍左右,并暗示了后续还有更多的优化策略待分享。
想要了解更多内容?
文章来源:
江南一点雨
扫码关注公众号
江南一点雨的其他文章
加入社区微信群
与行业大咖零距离交流学习
软件研发质量管理体系建设
白皮书上线