项目启动页加载太慢？和松哥一起掌握几个优化方案！

松哥正在录制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倍左右，并暗示了后续还有更多的优化策略待分享。