Difference between production and development build in ReactJS

The development build is used – as the name suggests – for development reasons. You have Source Maps, debugging and often times hot reloading ability in those builds.

The production build, on the other hand, runs in production mode which means this is the code running on your client’s machine. The production build runs uglify and builds your source files into one or multiple minimized files. It also extracts CSS and images and of course any other sources you’re loading with Webpack. There’s also no hot reloading included. Source Maps might be included as separate files depending on your webpack devtool settings.

What specifically separates production from development is dependent on your preferences and requirements, which means it pretty much depends on what you write in your Webpack configuration.

The webpack-production documentation is very straight-forward.
Also, the article Webpack 3 + React — Production build tips describes the process of creating production builds for React with Webpack pretty good.

Leave a Comment