因为webpack的默认打包机制会将我们项目中通过npm引入的js库全部打包成一个vendor.js文件里面
毫无疑问这个文件将会非常之大，不利于浏览器加载和浏览器的缓存，因为每次我们更新项目，都会生成一个新的vendor.js文件，浏览器没有缓存，每次都重新加载新的，会导致首次加载极慢
其实像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件
优化步骤：
1、首先将这些静态库js文件加入到项目的static文件夹里面，例如下面的vue.js文件：
2、在项目根目录的index.html入口模板文件中采用传统的<script></script>
方式引入js库
3、修改build\webpack.base.conf.js 文件，利用externals配置引用库，在module.exports中配置externals
说明一下externals的配置
比如第一个'vue':'Vue'
key值是：'vue' (这个值是import from 'vue'时用的名称）
value值是：'Vue' (这个值是通过script方式引入js库后它的全局变量 ，这时vue库的全局变量是首字母大写的 'Vue'
其他同理，element-ui 是import from 'element-ui'
而通过script方式引入时，它的全局变量名是大写的 'ELEMENT'
4、然后就可以按照以往一样的方式import相应的库了
import Vue from 'vue'
import Router from 'vue-router'
import Vuex from 'vuex'
5、优化后的浏览器加载效果，全部是独立加载各自的js文件，可以利用浏览器的缓存机制