webpack優化

一、使用webpack優化前端性能方法

• ⽤webpack優化前端性能是指優化webpack的輸出結果,讓打包的最終結果在瀏覽器運⾏快速⾼效。
• 可通過webpack優化前端的手段：
  • 代碼壓縮（刪除多餘的代碼、註釋、簡化代碼的寫法等等⽅式）
    • HTML文件代碼壓縮
      • 使用HTMLWebpackPlugin插件來生成HTML的模板時候，通過配置屬性minify進行HTML優化。
    • CSS代碼壓縮
      • 利⽤ cssnano （css-loader?minimize）來壓縮css。
    • JS代碼壓縮
      • 利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS⽂件。
  • 文件大小壓縮
    • 對文件的大小進行壓縮，減少http傳輸過程中寬頻的損耗。
  • 圖片壓縮
  • Tree Shaking
    • 將代碼中永遠不會⾛到的⽚段刪除掉（消除死代碼）。可以通過在啟動webpack時追加參數 --optimize-minimize 來實現。
  • 代碼分離
    • 代碼按路由維度或者組件分塊(chunk),這樣做到按需載入,同時可以充分利⽤瀏覽器緩存。
  • 提取公共第三⽅庫
    • SplitChunksPlugin插件來進⾏公共模塊抽取,利⽤瀏覽器緩存可以⻓期緩存這些⽆需頻繁變動的公共代碼 。

二、提高webpack構建速度方法

• 優化webpack構建的方式有很多，主要可以從優化搜索時間、縮小文件搜索範圍、減少不必要的編譯等方面入手。
  • 優化loader配置
    • 在使用loader時，可以通過配置include、exclude、test屬性來匹配文件，縮小文件的搜索範圍，優化搜索時間
  • 多⼊⼝情況下，使⽤ CommonsChunkPlugin 來提取公共代碼
  • 通過 externals 配置來提取常⽤庫，脫離webpack打包，不被打⼊bundle中，從⽽減少打包時間
  • 利⽤ DllPlugin 和 DllReferencePlugin 預編譯資源模塊 通過 DllPlugin 來對那些我們引⽤但是絕對不會修改的npm包來進⾏預編譯，再通過 DllReferencePlugin 將預編譯的模塊載入進來，讓⼀些基本不會改動的代碼先打包成靜態資源，避免反覆編譯浪費時間
  • 使⽤ Happypack 實現多線程加速編譯
  • 使⽤ webpack-uglify-parallel 來提升 uglifyPlugin 的壓縮速度。 原理上 webpack-uglify-parallel 採⽤了多核並⾏壓縮來提升壓縮速度
  • 使⽤ Tree-shaking 和 Scope Hoisting 來剔除多餘代碼
  • 利⽤緩存提⾼rebuild效率

三、減少webpack打包時間方法

• 優化 Loader

  • 對於 Loader 來說，影響打包效率首當其衝必屬 Babel 了。因為 Babel 會將代碼轉為字元串生成 AST，然後對 AST 繼續進行轉變最後再生成新的代碼，項目越大，轉換代碼越多，效率就越低。

    • 可以將 Babel 編譯過的文件緩存起來，下次只需要編譯更改過的代碼文件即可，這樣可以大幅度加快打包時間.

      loaders: ['babel-loader?cacheDirectory=true']
      

    • 優化 Loader 的文件搜索範圍。

      • 對於 Babel 來說，希望只作用在 JS 代碼上的，然後 node_modules 中使用的代碼都是編譯過的，所以完全沒有必要再去處理一遍。

        module.exports = {
            module: {
        	rules: [
        	        {	
                          // js文件才使用babel
        		  test: /\.js$/,
                          loader: 'babel-loader',
                          // 只在src文件夾下查找
        		  include: [resolve('src')],
                          // 不會去查找的路徑
        		  exclude: /node_modules/,
        		}
        	  ]
             }
        }
        

• HappyPack

  • 受限於 Node 是單線程運行的，所以 Webpack 在打包的過程中也是單線程的，特別是在執行 Loader 的時候，長時間編譯的任務很多，這樣就會導致等待的情況。HappyPack 可以將 Loader 的同步執行轉換為並行的，這樣就能充分利用系統資源來加快打包效率了。

    module: {
    	loaders: [
    		  {
    		    test: /\.js$/,
    		    include: [resolve('src')],
    		    exclude: /node_modules/,
    		    // id後面的內容對應下麵
                    loader: 'happypack/loader?id=happybabel'
    		  }
    	    ]
    },
    plugins: [
        new HappyPack({
            id: 'happybabel',
            loaders: ['babel-loader?cacheDirectory'],
            // 開啟4個線程
            threads: 4
        })
    ]
    

• DllPlugin

  • DllPlugin 可以將特定的類庫提前打包然後引入。這種方式可以極大的減少打包類庫的次數，只有當類庫更新版本才有需要重新打包，並且也實現了將公共代碼抽離成單獨文件的優化方案。

• 代碼壓縮

  • 在 Webpack3 中，一般使用 UglifyJS 來壓縮代碼，但是這個是單線程運行的，為了加快效率，可以使用 webpack-parallel-uglify-plugin 來並行運行 UglifyJS，從而提高效率。在 Webpack4 中，不需要以上這些操作了，只需要將 mode 設置為 production 就可以預設開啟以上功能。代碼壓縮也是我們必做的性能優化方案，當然我們不止可以壓縮 JS 代碼，還可以壓縮 HTML、CSS 代碼，並且在壓縮 JS 代碼的過程中，我們還可以通過配置實現比如刪除 console.log 這類代碼的功能。

• 其他

  • resolve.extensions
    • 用來表明文件尾碼列表，預設查找順序是 ['.js', '.json']，如果你的導入文件沒有添加尾碼就會按照這個順序查找文件。我們應該儘可能減少尾碼列表長度，然後將出現頻率高的尾碼排在前面。
  • resolve.alias
    • 可以通過別名的方式來映射一個路徑，能讓 Webpack 更快找到路徑。
  • module.noParse
    • 如果你確定一個文件下沒有其他依賴，就可以使用該屬性讓 Webpack 不掃描該文件，這種方式對於大型的類庫很有幫助。

四、減少webpack打包體積方法

• 按需載入

  • 在開發 SPA 項目的時候，項目中都會存在很多路由頁面。如果將這些頁面全部打包進一個 JS 文件的話，雖然將多個請求合併了，但是同樣也載入了很多並不需要的代碼，耗費了更長的時間。那麼為了首頁能更快地呈現給用戶，希望首頁能載入的文件體積越小越好，這時候就可以使用按需載入，將每個路由頁面單獨打包為一個文件。當然不僅僅路由可以按需載入，對於 loadash 這種大型類庫同樣可以使用這個功能。

• Scope Hoisting

  • Scope Hoisting 會分析出模塊之間的依賴關係，儘可能的把打包出來的模塊合併到一個函數中去。這樣的打包方式生成的代碼明顯比之前的少多了。如果在 Webpack4 中你希望開啟這個功能，只需要啟用 optimization.concatenateModules 就可以了。

    module.exports = {
      optimization: {
    	  concatenateModules: true
        }
    }
    

• Tree Shaking

  • Tree Shaking 可以實現刪除項目中未被引用的代碼（死代碼）。