我在将vendors
块拆分为3个较小的块时遇到麻烦(该块中的1个将消失并吸收到不同的块中)。如果我尝试将其分成2个较小的块,则效果很好。示例:
这是我的webpack.config.js
和3块的结果
entry: { client: index.js },
...
optimization: {
splitChunks: {
cacheGroups: {
vendorsPolyfill: {
test: /core-js/,
priority: -8,
},
vendorsReactRedux: {
test: /(react|redux)/,
priority: -9,
},
vendors: { // default one
test: /[\\/]node_modules[\\/](?!react|redux|core-js)/,
priority: -10,
},
},
},
},
通过上述配置,vendors
块消失了,其余所有模块都移到了client
块中:
Asset Size Chunks Chunk Names
vendorsReactRedux_client.e89a0748c7edc1a382ee.chunk.js 138 KiB 4 [emitted] vendorsReactRedux_client
vendorsPolyfill_client.6ecf7558e3f7c9af6b1c.chunk.js 82.2 KiB 5 [emitted] vendorsPolyfill_client
client.0a22043e5fbc0ef80a04.js 317 KiB 12 [emitted] [big] client
这是我的webpack.config.js
和2块的结果
entry: { client: index.js },
...
optimization: {
splitChunks: {
cacheGroups: {
vendorsReactRedux: {
test: /(react|redux)/,
priority: -9,
},
vendors: { // default one
test: /[\\/]node_modules[\\/](?!react|redux|core-js)/,
priority: -10,
},
},
},
},
结果正确,束尺寸分散更均匀:
Asset Size Chunks Chunk Names
vendors_client.d7a68f131623838071ab.chunk.js 220 KiB 4 [emitted] vendors_client
vendorsReactRedux_client.b13e9bfa6351e98e74e6.chunk.js 138 KiB 5 [emitted] vendorsReactRedux_client
client.2ad1c008e0aae7a980ab.js 179 KiB 12 [emitted] client
这是错误还是我没有正确使用splitChunks
?