vue单页面应用优化-分离静态js库，利用webpack的externals配置

因为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