webpack build後生成的app、vendor、manifest三者有何職能不一樣？

貼一下以前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