webpack指南-webpack介紹-程式碼分割

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方法

。