vue-webpack 打包過大的問題
使用 vue 的 webpack 模版開發專案時，我們習慣使用 npm install 安裝各種元件和依賴到本地，但引入的元件越來越多，打包時可能會導致 vendor.js 過大的問題，導致載入很慢。
首先我們瞭解一下vue在run build之後，dist裡面的檔案有哪些：
首先要理解為什麼會有以下三個檔案：
webpack應該是會在最後一個CommonsChunkPlugin產出的chunk注入webpackJsonp的定義,以及非同步載入相關的定義,而就是這個會涉及到所有entry及chunk的md5,所以會"經常變動"，同時vue-cli預設的vendor是打包node_module下的所有依賴，會很大，在生產環境，過大的檔案要儘量利用快取來加快載入速度，但“經常變動”不利於快取，所以為了將entry(這裡可認為是app.js)的變動隔離在vendor之外，vue-cli在vendor之後
app.js:基本就是你實際編寫的那個app.vue(.vue或.js?),沒這個頁面跑不起來
vendor.js::vue-cli全家桶預設配置裡面這個chunk就是將所有從node_modules/裡require(import)的依賴都打包到這裡，所以這個就是所有node_modules/下的被require(import)的js檔案
manifest.js: 最後一個chunk，被注入了webpackJsonp的定義及非同步載入相關的定義(webpack呼叫CommonsChunkPlugin處理後模組管理的核心,因為是核心,所以要第一個進行載入,不然會報錯).
從實際的專案開發中，也是發現vendor.js是最大的，在頻寬一定的情況下，非常影響載入速度，所以我們要利用引入 cdn 資源的方式，來減小vendor.js的大小：
1.webpack 配置項 externals(在 build/webpack.base.conf.js 中配置)
在module.exports = {}中新增如下資訊alias 是專案內使用時的元件名稱，ObjName 是某外部元件對外暴露的名稱。：
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'alias': 'ObjName' }
alias 是專案內使用時的元件名稱，ObjName 是某外部元件對外暴露的名稱。
例如：
vue 的 window 全域性名稱是 Vue
vue-router的 window 全域性名稱是 VueRouter
axios的 window 全域性名稱是 axios
2. 在專案 js 中引入：
# webpack 會檢測這些元件是否在 externals 中註冊
# 如果註冊則不會將其打包到 app.js 中
import Vue from 'vue'
import VueRouter from 'vue-router'
import $ from 'jquery'這樣配置的話 webpack 在 dev 執行或 build 打包時，就不會去本地元件包中查詢這些在 externals 中註冊的元件了（自然也不會將他們打包到一個 app.js 中去），而是會去 window 域下直接呼叫 Vue, VueRouter, $ 等物件。
3. index.html 模版配置如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
</body>
</html>