Webpack SplitChunksPlugin将1个大块拆分为2个以上的小块

时间:2018-07-23 07:09:48

标签: javascript webpack chunks code-splitting

我在将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

0 个答案:

没有答案