這里對“公共代碼”的解釋是，再有多個(gè)入口時(shí)，抽離兩個(gè)入口共有的依賴，將這些公共的部分單獨(dú)打包
現(xiàn)在來模擬上述情況，新建a.js, b.js, other.js, index.js和other.js都引用a和b

//a.js
console.log("a~~~~~~~~~~~");
//b.js
console.log("b~~~~~~~~~~~");
//index.js, other.js（方便模擬，這倆個(gè)文件代碼一樣）
import "./a.js";
import "./b.js";
console.log("這是index.js"); // console.log("這是other.js");

打包：

1967135-9ecbec02a4970095.png

生成的index和other也分別把a(bǔ)和b打包在了各自體內(nèi)，這樣很浪費(fèi)資源。webpack中的optimization字段中提供了splitChunks字段，就是為了抽離公共代碼

// webpack.config.js
optimization: {
    minimizer: [
      ....
    ]
    splitChunks: {
      // 分割代碼塊（多頁應(yīng)用才會用到）
      cacheGroups: {
        //緩存組
        common: {
          // 公共的模塊
          chunks: "initial", // 從開始處抽離，有多種配置，像異步模塊什么的
          minSize: 0, // 最小大小
          minChunks: 2 //  引用次數(shù)
        }
      }
    }
  },

如果還要抽離第三方模塊

optimization: {
    minimizer: [
      ...
    ]
    splitChunks: {
      // 分割代碼塊（多頁應(yīng)用才會用到）
      cacheGroups: {
        //緩存組
        common: {
          // 公共的模塊
          chunks: "initial", // 從開始處抽離，有多種配置，像異步模塊什么的
          minSize: 0, // 最小大小
          minChunks: 2 //  引用次數(shù)
        },
        vendor: {  // 此處為了抽離第三方的公共模塊，比如jquery（前提是index和other都引入jquery了）
          priority: 1,  //權(quán)重， 如果不給這個(gè)字段，那么就此例來說，會先走上邊的“common”，會把jquery和a.js，b.js合并在一個(gè)文件中。
                        //如果還有別的入口只使用jquery了，但是a和b對于它來說就是無用的。加上權(quán)重之后，會將第三方模塊單獨(dú)抽離
          test: /node_modules/,
          minSize: 0, // 最小大小
          chunks: "initial",
          minChunks: 2 //  引用次數(shù)
        }
      }
    }
  },

打包后：

1967135-ef2ede585e7b6dea.png