vue-cli中，使用第三方CDN外链资源（js、css）

双十一买了一台云服务器，正巧最近用vue写了一个生成随机密码的页面，于是部署在了该机器上。

机器的部署过程就略过，如果有人感兴趣，可以联系我，交流一下。

点击随机密码生成平台查看页面。

部署完成之后，打开页面，接近8秒的白屏时间，页面才渲染出来。

what？这是咋的啦？

F12打开看了一下网络请求，chunk-vendors.js文件居然有700多kb！

先简单介绍一下，这个页面使用 Vue Cli 3 生成，为了开发方便，引入了 element-ui 做组件库。

这个访问速度太慢了，简直不能忍。但是上云服务器一看，当时图便宜，买的最低配的云服务器，带宽是1Mbps，也就是说，下载页面资源，最高速度被限制在了 128kb/s ……

不怨天不怨地，怨我当时图便宜。

怎么提高页面加载速度？

云服务器的带宽升级有点贵，暂时不考虑。

那怎么在现有资源下，提高页面加载速度呢？

首先想到的，就是开启nginx的gzip，开启资源缓存。设置之后，多刷几次页面，简直快到飞起。

但是！但是！第一次加载页面，没有缓存的时候还是慢啊……

还是得想办法解决。

那就用外链吧，用第三方cdn的资源，不占用我们机器的带宽。

代码目录

改动点如下：

• （1）在 /public/index.html 中引入需要的js和css文件

index.html

• （2）去掉 package.json 中对于 vue、element-ui 等相关资源的依赖

• （3）/src/main.js ，去掉 vue、element-ui 等相关资源的 import 和 vue.use 这些语句

main.js

• （4）配置externals。由于使用 Vue Cli 3 默认配置，新建出来的项目没有了 build 目录，首先得在项目根目录下，新建 vue.config.js 文件，里面添加以下代码：

module.exports = {
    configureWebpack:{
        externals:{
            'Vue': 'Vue',
            'element-ui': 'element-ui',
            'clipboard':'VueClipboard'
        }
    }
}

为什么要配置 externals ？

因为在使用 vue-cli 进行编译的时候，可以通过这个，告诉脚手架，引用的外部资源怎么去识别。

最后效果

就这样，放在云服务器上的资源，由原来的接近800Kb，减少到了100Kb以内，页面加载速度显著提升~

参考

• 关于webpack的cdn配置
• Vue项目使用CDN优化首屏加载