貼一下之前vue腳手架的webpack3配置：
app.js是入口js相寇，vendor則是通過提取公共模塊插件來提取的代碼塊（webpack本身帶的模塊化代碼部分），而manifest則是在vendor的基礎(chǔ)上钮科，再抽取出要經(jīng)常變動的部分唤衫，比如關(guān)于異步加載js模塊部分的內(nèi)容。
從截圖上看也看出绵脯，vendor的文件大小最大佳励，因?yàn)槠浒藇ue整一個框架的代碼休里，以及webpack的模塊化代碼。
至于manifest的話赃承，主要是一些異步加載的實(shí)現(xiàn)方法（通過建立script方式動態(tài)引入js）妙黍，內(nèi)容上包含異步j(luò)s的文件名和路徑
1，CommonsChunkPlugin 抽取的是公共部分而不是"經(jīng)常變動的部分";
2瞧剖，觀察了一下拭嫁，webpack應(yīng)該是會在最后一個CommonsChunkPlugin產(chǎn)出的chunk注入webpackJsonp的定義,以及異步加載相關(guān)的定義,而就是這個會涉及到所有entry及chunk的md5,所以會"經(jīng)常變動"，同時vue-cli默認(rèn)的vendor是打包node_module下的所有依賴抓于，會很大做粤，在生產(chǎn)環(huán)境，過大的文件要盡量利用緩存來加快載入速度毡咏，但“經(jīng)常變動”不利于緩存驮宴，所以為了將entry(這里可認(rèn)為是app.js)的變動隔離在vendor之外，vue-cli在vendor之后多做了一個manifest的chunk,這樣entry只要不引入新的node_modules里的包就不會影響到vendor了.
ps:所以其實(shí)跟編譯次數(shù)沒什么關(guān)系,所有文件每次打包都會再編譯一次的,重點(diǎn)是大文件呕缭，緩存堵泽，變動代碼的拆分.
以下說明僅依照vue-cli全家桶默認(rèn)配置解讀，如有錯誤恢总，請指出：
app.js：基本就是你實(shí)際編寫的那個app.vue(.vue或.js?),沒這個頁面跑不起來.
vendor.js:vue-cli全家桶默認(rèn)配置里面這個chunk就是將所有從node_modules/里require(import)的依賴都打包到這里迎罗，所以這個就是所有node_modules/下的被require(import)的js文件
manifest.js: 最后一個chunk，被注入了webpackJsonp的定義及異步加載相關(guān)的定義(webpack調(diào)用CommonsChunkPlugin處理后模塊管理的核心,因?yàn)槭呛诵?所以要第一個進(jìn)行加載,不然會報(bào)錯).
精簡:
由于默認(rèn)的vendor的打包策略導(dǎo)致這個chunk很大,按照默認(rèn)配置這基本沒什么好精簡了,要精簡的話基本要針對項(xiàng)目實(shí)際來修改各個chunk的打包策略(盡量減少包的大小來提速首屏加載)
優(yōu)化:
單頁面基本就跟精簡同個道理吧,多頁面的話感覺還是自定義一下vendor的打包策略,畢竟不一定所有頁面都會用到全量的第三方依賴片仿，適當(dāng)減少vendor的體積能提高不少加載速度.
mark： webpack.optimize.CommonsChunkPlugin 在webpack3已經(jīng)被棄用纹安，webpack4需要使用新的配置 config.optimization.splitChunks
