webpack指南-webpack介紹-代碼分割

webpack最引人注目的特性之一就是代碼分割。它讓你可以分割代碼成多個包以便于你根據需求載入——例如當使用者浏覽到某個路由或者觸發某個事件時。它允許更小的包，也允許你控制資源載入優先級，如果使用恰當，可以很大程度上影響app載入時間。

webpack主要可以完場兩種代碼分割：

一個典型的應用會因為架構/功能需求依賴很多第三方庫。與應用代碼不同，庫中的代碼一般不會有變動。

如果我們保持庫代碼在自己的包中而不是和應用代碼在一起，我們讓浏覽器緩存機制去長時間緩存這些檔案在終端機器中。

為了起作用，vendor檔案名中 [hash]部分必須保持不變，而不考慮應用代碼變更。參考how to split vendor/library章節使用CommonsChunkPlugin

你或許希望分割樣式代碼到各個包中，獨立于應用邏輯。這樣就加強了樣式緩存能力并循序浏覽器與應用代碼同時加載樣式，進而防止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方法

。