深刻淺出webpack學習(17)--實現自動刷新

文件監聽

文件監聽是在發現源碼發生變化時，自動從新構建出新的輸出文件。

webpack官方提供了兩大模塊，一個是核心的webpack，一個是webpack-dev-server擴展模塊。而文件監聽功能是webpack模塊提供的。

以前介紹過webpack支持文件監聽相關的配置項以下：

module.export = {
    //只有開啓監聽模式時，watchOptions纔有意義
    //默認false，也就是不開啓
    watch: true,
    wathcOptions: {
        //不監聽的文件或者文件夾，支持正則匹配
        //默認爲空
        ignored: /node_modules/,
        //監聽到變化發生後會等300ms再去執行動做，防止文件更新太快
        //默認爲300ms
        aggregateTimeout: 300,
        //判斷文件是否發生變化是經過不停詢問系統指定文件有沒有變化實現的
        //默認每秒問1000次
        poll: 1000
    }
}

要讓webpack開啓監聽模式，有兩種方式：

在配置webpack.config.js中設置watch: true
在執行啓動webpack命令時，帶上 --watch 參數， 完整命令時webpack --watch

文件監聽工做原理

在webpack中監聽一個文件發生變化的原理是定時的去獲取這個文件的最後編輯時間，每次都存下最新的最後編輯時間，若是發現當前獲取的和最後一次保存的最後編輯時間不一致，就認爲該文件發生了變化。配置項中的watchOptions.poll就是用於控制定時檢查的週期，具體含義是檢查多少次。

當發現某個文件發生了變化，並不會馬上告訴監聽者，而是先換成起來，收集一段時間的變化後，再一次性告訴監聽者，配置項中的watchOptions.aggregateTimeout就是用於配置這個等待時間。這樣作的目的是由於咱們在編輯代碼的過程當中可能會高頻的輸入文字致使文件變化的事件高頻的發生，若是每次都從新執行構建就會讓構建卡死。

優化文件監聽性能

開啓監聽模式事，默認狀況下會監聽配置的Entry文件和全部其遞歸依賴的文件。在這些文件中會有不少存在node_modules下，由於現在的web項目會依賴大量的第三方模塊。在大多數狀況下咱們都不可能去編輯node_modules下的文件，而是編輯本身創建的源碼文件。因此很大的優化點就是忽略node_modules下的文件，不監聽他們：

module.export = {
    watchOptions: {
        //不監聽的node_modules目錄下的文件,
        ignored: /node_modules/
    }
}

採用這種方法優化後，你的webpack消耗的內存和cpu將會大大下降。

有時你可能會以爲 node_modules 目錄下的第三方模塊有 bug，想修改第三方模塊的文件，而後在本身的項目中試試。 在這種狀況下若是使用了以上優化方法，咱們須要重啓構建以看到最新效果。 但這種狀況畢竟是很是少見的。

除了忽略掉部分文件的優化外， 還有其餘以下兩種方法：

watchOptions.aggregateTimeout 值越大性能越好，由於這能下降從新構建的頻率。
watchOptions.poll 值越小越好，由於這能下降檢查的頻率。

自動刷新瀏覽器

監聽到文件更新後的下一步是去刷新瀏覽器，webpack 模塊負責監聽文件，webpack-dev-server 模塊則負責刷新瀏覽器。 在使用 webpack-dev-server 模塊去啓動 webpack 模塊時，webpack 模塊的監聽模式默認會被開啓。 webpack 模塊會在文件發生變化時告訴 webpack-dev-server 模塊。

自動刷新的原理

控制瀏覽器刷新有三種方法：

1. 藉助瀏覽器擴展去經過瀏覽器提供的接口刷新，WebStorm IDE 的 LiveEdit 功能就是這樣實現的.
2. 往要開發的網頁中注入代理客戶端代碼，經過代理客戶端去刷新整個頁面。
3. 把要開發的網頁裝進一個 iframe 中，經過刷新 iframe 去看到最新效果。

DevServer 支持第二、3種方法，第2種是 DevServer 默認採用的刷新方法。

優化自動刷新的性能

devServer: inline配置項，它就是用來控制是否往Chunk中注入代理客戶端，默認會注入。事實上，在開啓inline時，devServer會爲每一個輸出的chunk中注入代理客戶端的代碼，當你的項目須要輸出的chunk有不少時，這會致使你的構建緩慢。其實要完成自動刷新，一個頁面只須要一個代理客戶端就行。DevServer之因此粗暴的爲每一個chunk都注入，是由於它不知道某哥網頁依賴哪幾個chunk，索性就所有都注入一個代理客戶端。網頁只要依賴了其中任何一個chunk，代理客戶端就被注入到網頁中去。

這裏優化的思路是關閉還不夠優雅的 inline 模式，只注入一個代理客戶端。 爲了關閉 inline 模式，在啓動 DevServer 時，可經過執行命令 webpack-dev-server --inline false（也能夠在配置文件中設置）