Difference between Development and Production Builds in React
React application by default uses Webpack for production and development builds.
As a basic learners, We need to know the difference between Development and Production Build in React applications.
You can also check another post on [Production build or not at runtime](/How to detect production or development build at runtime in React)
Both builds compile and generate bundles of files that run the browser.
React Supports the Following tools to build Production Builds
- Webpack
- Brunch
- Browserify
- Rollup
Difference between production and development build in ReactJS
Development build runs the code as a Development environment and it is very slow. The production environment executes the code and is used by developers and QA people It Development, supports
- Generating Source Maps files for CSS, and helping developers to debug the code about original files
- Hot reloading enables you to reload changes without restarting the server
- Debugger available to debug the code in the browser console
- It creates a single bundle.js file
- Enable React Developer tools
- React DevTools Profiler
Production build is for running the code on client browsers with more performance improvements.
The production environment executes the code and is used by end users or customers
- It has separate bundle files for app and vendor instead of a single bundle file
- Minification and compression of javascript and HTML resources to reduce the size of a file.
- Source Map can be disabled at runtime to reduce the size of the code
- Also, Gzipping code to compress and reduce the size
