关于vue.js:Day-31100-Vue3-项目使用CDN加速

51次阅读

共计 466 个字符,预计需要花费 2 分钟才能阅读完成。

(一)需要

我的项目首屏加载慢,低峰时段 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…

正文完
 0