複習webpack4之打包分析,Preloading,Prefetching

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.打包分析

根據官方文檔，咱們可使用命令行配置webpack --profile --json > stats.json，把打包過程的描述生成到stats.json中。

而後進行一次打包。打包完成後，咱們會發現目錄下多了一個stats.json，這個文件就是對打包過程的描述，若是咱們看描述文件去分析打包流程會比較麻煩，因此咱們要藉助一些工具來分析。

進入到http://webpack.github.com/analyse，上傳剛剛生成的json文件。

會出現圖示中的信息，顯示了webpack版本是4.30.0，打包耗時20702毫秒，hash值，以及引用了46個modules，生成了2個chunk，生成了5個靜態文件，沒有警告和異常。

點擊modules，還能夠看到包之間的關係。

除了這個工具，文檔中還提供了幾個其餘的工具。

若是須要使用的話，就能夠看對應文檔，進行使用。

2.Preloading， Prefetching

這裏介紹一下谷歌瀏覽器Coverage工具

從這個工具中能夠看到咱們頁面js的使用率，而使用異步引入js的方式能夠提升js的使用率，因此webpack建議咱們多使用異步引入的方式，這也是splitChunks.chunks的默認值是"async"的緣由。

可是異步引入代碼時也可能存在問題，好比用戶點擊一個按鈕，彈出登陸框，咱們在點擊以後加載登陸框的js，可能會讓這個點擊行爲反應變慢，那麼如何解決這個問題呢？

使用魔法註釋 /* webpackPrefetch: true */ ，這樣在主要js加載完，帶寬有空閒時，會自動下載須要引入的js。

還能夠寫成/* webpackPreload: true */，區別是webpackPrefetch會等到主業務文件加載完，帶寬有空閒時再去下載js，而preload是和主業務文件一塊兒加載的。