vue-cli打包 vendor文件 或app.js文件 过大

使用vue-cli脚手架打包后（UI使用的是Element-UI），发现vendor.js 文件很大，将近5M之多。文件
过大会导致浏览器加载过慢，及其影响用户的体验。下面提供几种方式来解决此问题

• 把不常改变的库放到index.html中，通过cdn引入比如
  
  中间会发现bootcss提供的cdn并不稳定，老是访问不了导致项目崩溃，这里推荐两个比较稳定的
  CDN jsdelivr 和 unpkg，不知道的可以百度了解一下。当然最安全的方式就是找到对应库的压缩
  js文件和 css文件 放到本地的开发文件夹中 例如：
  
  然后找到build/webpack.base.conf.js文件，在mudule.exports = {} 中添加以下代码

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
 },

这样webpack 就不会把vue.js, vue-router，element-ui库打包了。把main.js中对element的引入删掉了，不然发现打包后的app.css还是会把element的css打包进去，删掉后就没了，
打包就会发现vendor文件小了很多~

• vue路由的懒加载

刚开始我们使用路由可能是下面这样（router.js），这样一开始进入页面就会把所有的路由资源都加载，如果项目大，加载的内容就会很多，等待的时间页就会越长，导致给用户的不好的体验效果。

为了把路由分模块，然后每次进入一个新页面才加载该页面所需要的资源（也就是异步加载路由），我们可以像下面这样使用(router.js)：

然后你打包就会发现，多了很多1.xxxxx.js；2.xxxxx.js等等，而vendor.xxx.js没了，剩下app.js 和manifest.js，而且app.js还很小

• 取消生产.map文件

不生成map文件，这样打包速度快一些，整个项目文件也小很多（map文件一般都很大）;
取消生成map文件，找到config/index.js ，修改下面箭头指向为false，就行了。

• 本地所用到的图片一定通过 压缩工具或其他的方式处理，进而减小文件大小