Webpack warns that the "combined asset size" is exceeding 244 KiB after code splitting

Viewed 18

After running the Webpack Bundle Analyzer plugin, it was clear that react-dom was the largest dependency that was effecting the size of my bundle.

I split out react and react-dom into it's own chunk by adding the following:

optimization: {
    splitChunks: {
      cacheGroups: {
        reactVendor: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          name: 'vendor-react',
          chunks: 'all'
        }
      }
    }
  },

The chunk was created and my main bundle shrunk down in size, however, Webpack is now giving me a similar warning where "The following entrypoint(s) combined asset size exceeds the recommended size".

Results after splitting out react-dom:

asset main.bundle.js 164 KiB [emitted] [minimized] (name: main) 1 related asset

asset vendor-react.bundle.js 134 KiB [compared for emit] [minimized] (name: vendor-react) (id hint: reactVendor) 1 related asset

Warning: Entrypoint main [big] 298 KiB = vendor-react.bundle.js 134 KiB main.bundle.js 164 KiB

Any recommendations on what I am doing wrong, or best practices on how this should be handled?

0 Answers
Related