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