(一)需求

项目首屏加载慢,低峰时段8.7s,高峰时段甚至有60s+ 以上的反馈。

(二)原因

Vue-cli 本身是有对webpack 打包优化的。

慢,是因为项目做了负载均衡 + nginx 做了限流。

(起因是防止DDOS攻击,这里仍需优化)。

由于打包后是静态文件,所以想到了使用CDN来加速的办法。

(三)步骤

1、修改vue.config.js文件导出文件路径

之前服务器上使用的是相对路径。

再次打包后,需要将项目路径,添加上CDN的绝对路径。

module.exports = {
  publicPath: 'OSS路径', // 生产环境
}

2、打包并上传到OSS中

上传除了index.html 文件的其他文件到OSS中。

3、上传index.html 文件到服务器对应路径下

最终结果

image.png

效果还挺明显的,首屏加载从8.73秒到1.75s~


哎,虽然leader不重视,但收获的是自己的。

Vue3 首屏加载还有其他的方案,之前我自己也做过一些优化,并不是我的主要问题。

感兴趣的同学可以看参考链接。

参考链接

https://juejin.cn/post/691353...


SnowWolfArden
24 声望10 粉丝

喜欢解决问题,每日复盘 600 天以上。