cdn优化

文章目录

一、修改index.html二、修改vue.config.js配置文件三、package.json四、main.js 优化前后效果对比图：

从图片中可以看出，打包后的文件在压缩后的情况下，还少了300多k，在网速没有影响的情况下，首屏的加载速度进一步提升。

cdn优化前：

cdn优化后：

可以通过对比看出来，事实上速度并没有很大的提升，这可能与当前的网络环境有关。不放心别人的cdn时，将上述的 cdn 文件内容下载到本地放在 static 目录下当做静态文件即可。

一、修改index.html

CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升。

可以将一些大的库放上去，首先打开package.json,看看有哪些是可以进行cdn优化的，在我的项目中，我将vue,vue-router,echarts都放到了cdn上。

打开BootCDN，然后搜索关键字并copy链接粘贴到index.html的body闭合标签前，如下图：

这里的版本号一定要和package.json上的版本号对应上

二、修改vue.config.js配置文件

在configureWebpack里面添加，目的是不打包这些选项：

externals: { 'vue': 'Vue', 'echarts': 'echarts', 'vue-router': 'VueRouter', "prismplayer": "prismplayer" },

三、package.json

package.json中这些依赖都可以删除掉了

四、main.js

main.js中这些相关的引入也可以去掉了

所有静态资源放上去——使用CDN优化首页加载速度（侵删）