Code Splitting
將代碼拆分成多個bundle,時webpack提供的比較吸引人的功能溉苛。
拆分之后的代碼可以按照需求進行動態(tài)加載而不需要一次把所有代碼都進行加載渺绒。
比如仅炊,當用戶導航都某個路由頁面斗幼,或者基于用戶觸發(fā)的某個事件后進行加載。
將代碼拆分的力度比較細之后抚垄,可以按照優(yōu)先級來進行加載蜕窿,從而減少用戶首次加載的等待時間。
webpack主要支持兩種類型的代碼拆分呆馁。
1.基于緩存及并行加載的資源拆分
Vendor代碼拆分
業(yè)務代碼中會使用到很多第三方的類庫桐经,將第三方類庫拆分成單獨的bundle。
可以在業(yè)務代碼改變的情況下浙滤,不改變拆分的第三方庫的bundle阴挣,
這樣就可以讓瀏覽器對該bundle做緩存,從而避免多次下載纺腊。
為了實現(xiàn)這點畔咧,需要vendor的文件名的[hash]
保證固定,無論業(yè)務代碼怎么變揖膜,[hash]
都不改變誓沸。更多的內(nèi)容,參考Code Spliting - Libraries.
CSS拆分
某些場景下可能也希望將style樣式從邏輯代碼中拆分到獨立的bundle壹粟。
這樣做可以讓瀏覽器對該部分樣式更好的做緩存并可以讓網(wǎng)頁異步加載樣式蔽介,從而避免FOUC
更多內(nèi)容參考使用ExtractTextWebpackPlugin拆分css
2.按需求進行代碼拆分
將資源進行拆分,需要以配置文件的方式設(shè)置拆分的文件。
同樣的也可以以代碼的形式對代碼進行拆分虹蓄。
這樣做可以拆分出顆粒度更細的bundle。比如:可以按照應用程序的路由或每個用戶的使用習慣進行拆分幸撕。這樣可以避免用戶加載非必要bundle薇组,從而提升加載的速度。
- Code Splitting - Using import() -ECMAScript寫法
- Code Splitting - Using require.ensure - CommonJS的寫法