貼一下之前vue腳手架的webpack3配置：

app.js是入口js，vendor則是通過提取公共模組外掛來提取的程式碼塊（webpack本身帶的模組化程式碼部分），而manifest則是在vendor的基礎上，再抽取出要經常變動的部分，比如關於非同步載入js模組部分的內容。

從截圖上看也看出，vendor的檔案大小最大，因為其包含了vue整一個框架的程式碼，以及webpack的模組化程式碼。

至於manifest的話，主要是一些非同步載入的實現方法（通過建立script方式動態引入js），內容上包含非同步js的檔名和路徑

1，CommonsChunkPlugin 抽取的是公共部分而不是"經常變動的部分";

2，觀察了一下，webpack應該是會在最後一個CommonsChunkPlugin產出的chunk注入webpackJsonp的定義,以及非同步載入相關的定義,而就是這個會涉及到所有entry及chunk的md5,所以會"經常變動"，同時vue-cli預設的vendor是打包node_module下的所有依賴，會很大，在生產環境，過大的檔案要儘量利用快取來加快載入速度，但“經常變動”不利於快取，所以為了將entry(這裡可認為是app.js)的變動隔離在vendor之外，vue-cli在vendor之後多做了一個manifest的chunk,這樣entry只要不引入新的node_modules裡的包就不會影響到vendor了.

ps:所以其實跟編譯次數沒什麼關係,所有檔案每次打包都會再編譯一次的,重點是大檔案，快取，變動程式碼的拆分.

以下說明僅依照vue-cli全家桶預設配置解讀，如有錯誤，請指出：

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的打包策略導致這個chunk很大,按照預設配置這基本沒什麼好精簡了,要精簡的話基本要針對專案實際來修改各個chunk的打包策略(儘量減少包的大小來提速首屏載入)

優化:

單頁面基本就跟精簡同個道理吧,多頁面的話感覺還是自定義一下vendor的打包策略,畢竟不一定所有頁面都會用到全量的第三方依賴，適當減少vendor的體積能提高不少載入速度.

mark： webpack.optimize.CommonsChunkPlugin 在webpack3已經被棄用，webpack4需要使用新的配置 config.optimization.splitChunks