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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM