vue--首次白屏加载慢的问题

vue项目在npm run build部署之后，首次加载页面的时候请求巨慢，通过f12开发者工具检查得知，其中的静态文件加载较慢，如vendor.js，文件大小3.8M

参考博客：https://blog.csdn.net/weixin_44668908/article/details/109157082

原因如下：

原因1：由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。

原因2：还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载

二者相加所以会有长时间的白屏。

 

于是通过博客中的2、3有效的提高了首次加载的效率。禁止生成.map文件，将静态文件压缩。

2.防止编译文件中出现map文件。
config/index.js 文件中设置 productionSourceMap 为 false

3.使用gzip压缩
1). 修改config/index.js 文件下 productionGzip：true ;
2). 安装依赖 npm install --save-dev compression-webpack-plugin@1.1.11 。（注：这里为啥要指定 版本号呢，是因为高版本的依赖会报错，我使用的1.1.11版本是没报错）

遇到的问题：

打包之后，项目请求的静态文件依然是未打包之前的3.8M，清理缓存后依然未生效，此配置应该在nginx中配置，因我项目用caddy部署，所以在caddy中加了一行配置，成功加载到了打包之后的839kb的vendor.js文件。配置如下：