(一)需要
我的项目首屏加载慢,低峰时段 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 文件到服务器对应门路下
最终后果
成果还挺显著的,首屏加载从 8.73 秒到 1.75s~
哎,尽管 leader 不器重,但播种的是本人的。
Vue3 首屏加载还有其余的计划,之前我本人也做过一些优化,并不是我的次要问题。
感兴趣的同学能够看参考链接。
参考链接
https://juejin.cn/post/691353…