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?