一步一步的了解webpack4的splitChunk插件(小结)

optimization: {
 splitChunks: {
  chunks: "async", // 必须三选一 "initial" | "all"(推荐) | "async" (默认就是async)
  minSize: 30000, // 最小尺寸，30000
  minChunks: 1, // 最小 chunk ，默认1
  maxAsyncRequests: 5, // 最大异步请求数， 默认5
  maxInitialRequests : 3, // 最大初始化请求书，默认3
  automaticNameDelimiter: '~',// 打包分隔符
  name: function(){}, // 打包后的名称，此选项可接收 function
  cacheGroups:{ // 这里开始设置缓存的 chunks
   priority: 0, // 缓存组优先级
   vendor: { // key 为entry中定义的 入口名称
    chunks: "initial", // 必须三选一 "initial" | "all" | "async"(默认就是async) 
    test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
    name: "vendor", // 要缓存的 分隔出来的 chunk 名称 
    minSize: 30000,
    minChunks: 1,
    enforce: true,
    maxAsyncRequests: 5, // 最大异步请求数， 默认1
    maxInitialRequests : 3, // 最大初始化请求书，默认1
    reuseExistingChunk: true // 可设置是否重用该chunk
   }
  }
 }
 },

entry: {
		pageA: "./pageA", // 引用utility1.js utility2.js
		pageB: "./pageB", // 引用utility2.js utility3.js
		pageC: "./pageC" // 引用utility2.js utility3.js
	},
	
	optimization: {
		splitChunks: {
			cacheGroups: {
				mons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create mons chunks
				}
			}
		}
	},

 runtimeChunk: "single"
 // 等价于
 runtimeChunk: {
  name: "manifest"
 }

vendor: {
		test: /node_modules/,
		chunks: "initial",
		name: "vendor",
		priority: 10,
		enforce: true
	}

splitChunks: {
  chunks: "all",
  cacheGroups: {
				mons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create mons chunks
				}
			}
		},

 mons: {
   chunks: "initial",
   minChunks: 2,
   maxInitialRequests: 5, // The default limit is too small to showcase the effect
   minSize: 0 // This is example is too small to create mons chunks
	},
  'vendor-pageA': {
   test: /vue/, // 直接使用 test 来做路径匹配
   chunks: "initial",
   name: "vendor-pageA",
   enforce: true,
  },
  'vendor-pageB': {
   test: /react/, // 直接使用 test 来做路径匹配
   chunks: "initial",
   name: "vendor-pageB",
   enforce: true,
  },

import(/ webpackChunkName: "mon-async.js" /"./mon-async").then(mon => {
 console.log(mon);
})

 mons: {
   	chunks: "initial",
		minChunks: 2,
		maxInitialRequests: 5, // The default limit is too small to showcase the effect
		minSize: 0 ,
		name: "mons"
  },