Troubleshooting Massive React-DOM Size Increase in Webpack Bundle

React-DOM Blowing Out Webpack Bundle Size MASSIVELY

If you are a React developer working with Webpack, you might have come across a baffling issue with react-dom significantly increasing the bundle size. In this blog post, we will explore this bizarre issue and discuss possible solutions.

The File Size Increase

React-DOM is an essential part of any React application, but in v15.4.0, its file size grew exponentially. Previously, react-dom only occupied 1.17kB, but with the update, it ballooned to a whopping 619.05kB. This means that the problem lies not in your Webpack setup, but rather in the transferred code from the react module.

Fortunately, this issue has been well-documented by Elijah Manor on his blog. You can find detailed analysis and insights into the increase in file size of react-dom in his blog post here.

Adjusting Webpack Configuration

While the issue is not with your Webpack setup, you can still make some changes to optimize the bundle size. One of the adjustments you can make is to switch the devtool configuration in your webpack.config.js file from:

devtool: 'inline-source-map'

to:

devtool: 'source-map'

By making this change, Webpack will generate a much smaller .js file along with a separate .js.map file for each chunk. This new configuration decreases the size of the generated JavaScript file, ensuring that it is even smaller than react-dom.production.min.js from the node_modules folder.

Understanding the Bundled React-DOM Size

If you investigate the node_modules folder and compare the file sizes, you will notice that the size of the bundled react-dom.js file is inherently large. This explains why the bundle size grows significantly when using react-dom.

Optimizing Imports with Plugins

One way to further optimize your imports is to include the following commands as plugins in your Webpack configuration:

new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin(),

Using these plugins, you can minimize your imports and reduce the bundle size. When deploying your application to production, make sure to utilize these plugins to achieve the best performance.

By implementing these changes and understanding the reasons behind the increased bundle size, you can effectively optimize your React application using react-dom and Webpack.

Thank you for reading this blog post. We hope this troubleshooting guide helps you tackle the perplexing issue of react-dom blowing out your Webpack bundle size. Stay tuned for more insightful articles on coding and programming.

reference : 

reactjs