webpack配置文件

/** 可以将node_modules 中代码单独打包一个chunk最终输出
 */
optimization: {
	splitChunks: {
		chunks: "all" //这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。
		priority: 3, //优化将优先考虑具有更高 priority（优先级）的缓存组。默认组的优先级为负，

		//每个缓存组 optimization.splitChunks.cacheGroups[x].maxSize 全局使用 optimization.splitChunks.maxSize 或对后备缓存组 
		//maxSize 比 maxInitialRequest/maxAsyncRequests 具有更高的优先级。实际优先级是 maxInitialRequest/maxAsyncRequests < maxSize < minSize
		maxSize: 1024,
		//如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块。这可能会影响 chunk 的结果文件名
		cacheGroups: {
			defaultVendors: {
				reuseExistingChunk: true,
			},
		},
	}
}

实际使用

optimization: {
	splitChunks: {
		cacheGroups: {
			commons: {
				name: "commons",
				minChunks: 2,
				chunks: "async", //异步抽取公共模块
				priority: 3,
				maxSize: 1024,
			},
			vendors: {
				name: "chunk-vendors",
				test: /[\\/]node_modules[\\/]/,
				chunks: "initial",
				priority: 2,
				reuseExistingChunk: true,
			},
			antDesignVue: {
				name: "chunk-ant-design-vue",
				test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
				chunks: "initial",
				priority: 4,
				reuseExistingChunk: true,
				enforce: true,
			},
			// =========自定义模块============
			svgs: {
				//svg 图标单独打包
				name: "chunk-svgs",
				test: path.resolve("src/assets/svg"),
				chunks: "initial",
				priority: 6,
				reuseExistingChunk: true,
				enforce: true,
			},
		}
	}
},