[JavaScript知识库]Day 195/200 Vue3 项目使用CDN加速

（一）需求

项目首屏加载慢，低峰时段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/6913531130180272142