Webpack之optimization.splitChunks代碼分割插件的配置

SplitChunkPlugin插件配置參數詳解

• 對引入的庫代碼（例如:lodash、jQuery等）進行代碼的分割進行優化
• 若配置時只寫chunks："all"，其余則為默認配置
• 代碼分割后的每一個js文件即為Chunk，如下圖中的（main.js、vendors.js）

optimization: {
		splitChunks: {
			chunks: "all",   // 共有3個值"initial"，"async"和"all"。配置后，代碼分割優化僅選擇初始塊，按需塊或所有塊
			minSize: 30000,   // （默認值：30000）塊的最小大小
			minChunks: 1,    // （默認值：1）在拆分之前共享模塊的最小塊數
			maxAsyncRequests: 5,   //（默認為5）按需加載時並行請求的最大數量
			maxInitialRequests: 3,  //（默認值為3）入口點的最大並行請求數
			automaticNameDelimiter: '~',  // 默認情況下，webpack將使用塊的來源和名稱生成名稱，例如vendors~main.js
			name: true,
			cacheGroups: {  // 以上條件都滿足后會走入cacheGroups進一步進行優化的判斷
				vendors: {
					test: /[\\/]node_modules[\\/]/,  // 判斷引入庫是否是node_modules里的
					priority: -10,   // 數字越大優先級越高 （-10大於-20）
					filename: 'vendors.js'  // 設置代碼分割后的文件名
        		},
				default: {   //所有代碼分割快都符合默認值，此時判斷priority優先級
					minChunks: 2,  
					priority: -20,
					reuseExistingChunk: true   // 允許在模塊完全匹配時重用現有的塊，而不是創建新的塊。
				}
			}
    	}
	},

學習文檔：https://www.webpackjs.com/plugins/split-chunks-plugin/