解决Vue 2.x项目打包后vendor和app文件过大的问题

背景
最近在做的一个web项目（前端基于Vue+Vue-router）出现了首屏加载很慢的问题-长达30秒的等待时间,这样的加载时间是绝对无法忍受的！经过排查发现原因有2:
1.执行npm run buid 命令打包之后，生成的vendor.xxx.js文件过大；
2.服务器带宽只有1Mbps，导致资源下载较慢.

通过科学上网，找到了不少解决方法，但大都比较零散，经过一番折腾和踩坑，总结出以下方法和步骤，希望能帮助到需要的同学。
一、首屏依赖的静态资源改为从index.html引入CDN的资源。
1.如果使用的第三方包比较多，需要找出那些体积大的包，通过npm run build --report命令打包并成详细报告，根据报告决定哪些资源不使用webpack打包。
2.以element-ui为例，在index.html文件中引入它的CDN资源：

<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>

引入第三方CDN资源的好处是可以减少对项目所在服务器的带宽占用和流量消耗。并且在其他站点使用相同资源的情况下，浏览器默认情况下还会缓存这些资源，当再一次请求时会优先取缓存，从而大大提高加载速度；当然缺点也有，比如某些CND的不稳定将会导致项目不稳定甚至崩溃，如何取舍和解决需读者根据具体场景进行考量，在此不详细展开。

3.接着在项目build/webpack.base.js文件下，添加如下配置

externals:{
    'element-ui':'ELEMENT'
 }

这里externals字段配置是告诉webpack以下哪些模块不需要打包进生成当js文件，其中属性名为项目中import的模块，属性值为对应的全局变量。此例中element-ui为项目中import的模块名，ELEMENT为通过CDN引入的element-ui组件库暴露出的全局变量，在项目中我们仍然使用import导入element-ui:

import ElementUI from 'element-ui'

重要：如果不知道自己通过CDN引入的资源暴露出的全局变量名，可以在源码中查找导出的关键字。
如在浏览器输入unpkg.com/element-ui@2.4.11/lib/index.js,我们在最前面部分看到如下代码：

object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("ELEMENT",\["vue"\],t):"object"==typeof exports?exports.ELEMENT=t(require("vue")):e.ELEMENT=t(e.Vue)

由此可知将该js文件引入index.html后，将会在windowd对象上挂载一个全局变量ELEMENT

二、Vue-router改为懒加载配置

配置懒加载路由，使资源按需加载，直接上代码：

 {
      path: '/console',
      name: 'console',
      meta: {},
      component: resolve => require(['@/pages/console/console'], resolve),
      children: [
        {
          path: 'home',
          name: 'home',
          meta: { location: '首页' },
          component: resolve => require(['@/pages/home/home'], resolve)
        },
        {
          path: 'user',
          name: 'user',
          meta: { location: '登录用户信息' },
          component: resolve => require(['@/pages/user'], resolve)
        },
        {
          path: 'dashboard',
          name: 'dashboard',
          meta: { location: '仪表盘' },
          component: resolve => require(['@/pages/dashboard'], resolve)
        },
        resourceRoute,
        cdRoute,
        ciRoute,
        appRoute,
        opstoolsRoute
      ]
    }