故事的开始：
为了体验一下把自己的网站放在外网服务器上，作为学生党的我，手头没有太多的money，只好在腾讯云上买了一台1核1M的服务器，这可是最低的配置了。
一开始使用npm run build得到的dist文件夹体积将近有10MB，放到服务器上，然后从外网首次打开，时间大约有15-20s吧，心想这怎么可以忍受啊。于是乎发挥大脑的能动性，开始收集各种方法，终于皇天不负有心人，发生了以下的演变。
dist文件夹 将近10MB -> 不足1MB
首页加载时间 15-20s -> 3-4s
下面将重点讲解如何使用1M的服务器来把首页加载时间缩短在3s
优化策略：
这个优化策略主要从3个方面来讲，做好笔记了，各位看官。
①、cdn引入
同样的，细心的同学可能会留意到在打包完项目后，会发现dist文件中有个名为vendor xxxx.js的文件有点亮眼，因为它的体积相对其他js文件来说就有点大了，那么这个文件是怎么生成得来的呢？
这个vendor文件就是根据我们的所引入的插件、库生成的，像Vue、ElementUI等之类的，引入的库的越多，打包后生成的vendor文件就越大，那么怎么减少这个vendor文件的体积呢？
那就是把这些体积较大的插件通过cdn引入，在我们的index.html文件里，相信做到vue开发的，在html引入外部css和js文件难不倒大家吧，如图所示：
这里注意下：<script>标签要在body内，否则获取不到所引入的cdn文件，自然就会报想Vue is not defined的错误了
修改完index.html 文件后，我们还需要修改另外一个地方
找到build文件夹下webpack.base.conf.js文件，找到下列地方，如图：
选中的externals那块本来是没有的，是我自己添加上去的，自己按照上面的格式照搬下来即可，
这里有个坑的需要提醒一下，上面我把element-ui给注释掉，在看其他的文章的时候发现cdn引入element的正确操作如下：
①、external不需要写elementUI
②、在main.js的如下都注释掉,这可能是webpack的机制，有待讨论
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
如果上面的两步没有正确操作，则会可能报出 ElementUI is not defined 的错误
②、大图片另加载
这个原理也是跟上面的cdn引入一样，基于分担服务器下载的原理
我们在项目的时候都会有自己的images文件夹，里面包含了自己项目所需要的图片，虽然可以使用图片懒加载，但我想到另外一个方法，有得必有失，这个方面就需要占用额外的内存。
我们可以利用云功能的对象存储把图片放在第三方服务器上，利用得到外链全部替换本地图片路径，这样在加载图片的时候比在自己的服务器快很多，这个时候只需要考虑用户的网速而不用考虑自己服务器的带宽。
这个只是我自己想法，相对于我这种学生党没钱买服务器来说哈，大公司就当我什么都没说
③、路由懒加载
官方文档地址： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
简单来说就是访问到当前页面才会加载相关的资源，这对提高首页加载速度有很大的好处。
代码格式如图：
这里就不多说了，因为官方文档有哈。