webpack最引人注目的特性之一就是代碼分割。它讓你可以分割代碼成多個包以便于你根據需求載入——例如當用戶瀏覽到某個路由或者觸發某個事件時。它允許更小的包,也允許你控制資源載入優先級,如果使用恰當,可以很大程度上影響app載入時間。
webpack主要可以完場兩種代碼分割:
為了緩存和并行加載的資源分割
vendor代碼分割
一個典型的應用會因為框架/功能需求依賴很多第三方庫。與應用代碼不同,庫中的代碼一般不會有變動。
如果我們保持庫代碼在自己的包中而不是和應用代碼在一起,我們讓瀏覽器緩存機制去長時間緩存這些文件在終端機器中。
為了起作用,vendor文件名中 [hash]部分必須保持不變,而不考慮應用代碼變更。參考how to split vendor/library章節使用CommonsChunkPlugin
CSS分割
你或許希望分割樣式代碼到各個包中,獨立于應用邏輯。這樣就加強了樣式緩存能力并循序瀏覽器與應用代碼同時加載樣式,從而防止FOUC(flash of unstyled content)
參考how to split CSS,使用ExtractTextWebpackPlugin。
按需求分割代碼
前面的分割方式要求用戶預先在配置中明確分割點,但也有一種方法可以在應用代碼中創建動態分割點。
This can be used for more granular chunking of code, for example, per our application routes or as per predicted user behaviour. This allows the user to load non-essential assets on demand.這也可以適用于多顆粒代碼分塊中,例如,應用中每一個路由或者每一個預期的用戶動作。它允許用戶根據需求加載非必須資源。
代碼分割——使用import()-ECMAScript6方案
代碼分割——使用require.ensure-通用JS方法
。