双十一买了一台云服务器，正巧最近用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以内，页面加载速度显著提升~
网友评论