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

由于webpack的默认打包机制会将咱们项目中经过npm引入的js库所有打包成一个vendor.js文件里面

毫无疑问这个文件将会很是之大，不利于浏览器加载和浏览器的缓存，由于每次咱们更新项目，都会生成一个新的vendor.js文件，浏览器没有缓存，每次都从新加载新的，会致使首次加载极慢

其实像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，若是将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都从新加载这些库js，而且大大的减小了打包的vendor.js文件

优化步骤：

一、首先将这些静态库js文件加入到项目的static文件夹里面，例以下面的vue.js文件：

二、在项目根目录的index.html入口模板文件中采用传统的<script></script>

方式引入js库

三、修改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'

四、而后就能够按照以往同样的方式import相应的库了

import Vue from 'vue'

import Router from 'vue-router'

import Vuex from 'vuex'

五、优化后的浏览器加载效果，所有是独立加载各自的js文件，能够利用浏览器的缓存机制