學習webpack4 - 抽離公共代碼

學習webpack4 - 基礎配置
學習webpack4 - HTML處理
學習webpack4 - 樣式處理
學習webpack4 - ES6語法轉化
學習webpack4 - 第三方模塊的使用
學習webpack4 - 抽離公共代碼

...持續中

=======================================================

抽離公共代碼

咱們在開發多個頁面的項目的時候，有時候會在幾個頁面中引用某些公共的模塊，這些公共模塊屢次被下載會形成資源浪費，若是把這些公共模塊抽離出來只需下載一次以後便緩存起來了，這樣就能夠避免因重複下載而浪費資源，那麼怎麼在webpack中抽離出公共部分呢？方法以下：

公共模塊抽離

舉例：

項目中分別有a.js, b.js, page1.js, page2.js這四個JS文件， page1.js 和 page2.js中同時都引用了a.js, b.js， 這時候想把a.js, b.js抽離出來合併成一個公共的js，而後在page1, page2中自動引入這個公共的js，怎麼配置呢？以下：

配置webpack.config.js文件：

module.exports = {
  //...

  //優化項配置
  optimization: {
    // 分割代碼塊
    splitChunks: {
      cacheGroups: {
        //公用模塊抽離
        common: {
          chunks: 'initial', 
          minSize: 0, //大於0個字節
          minChunks: 2 //抽離公共代碼時，這個代碼塊最小被引用的次數
        }
      }
    }
  }
}

完成！

第三方模塊抽離

頁面中有時會引入第三方模塊，好比import $ from 'jquery'; page1中須要引用，page2中也須要引用，這時候就能夠用vendor把jquery抽離出來，方法以下：

module.exports = {
  //...

  //優化項配置
  optimization: {
    // 分割代碼塊
    splitChunks: {
      cacheGroups: {

        //公用模塊抽離
        common: {
          chunks: 'initial',
          minSize: 0, //大於0個字節
          minChunks: 2, //在分割以前，這個代碼塊最小應該被引用的次數
        },
        
        //第三方庫抽離
        vendor: {
          priority: 1, //權重
          test: /node_modules/,
          chunks: 'initial',
          minSize: 0, //大於0個字節
          minChunks: 2, //在分割以前，這個代碼塊最小應該被引用的次數
        }
      }
    }
  }
}

注意：這裏須要配置權重 priority，由於抽離的時候會執行第一個common配置，入口處看到jquery也被公用了就一塊兒抽離了，不會再執行wendor的配置了，因此加了權重以後會先抽離第三方模塊，而後再抽離公共common的，這樣就實現了第三方和公用的都被抽離了。

不加權重以前：
jquery也被抽離到了公共js裏

加了權重以後：