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文件，能夠利用瀏覽器的緩存機制