Menu
Recently I started learning react and I saw a tutorial where they used Webpack to create the production and development builds. But there was no explanation on what the difference between those two builds is and which one you have to use when. I searched the internet but didn't find anything that helped me. Does anyone have a tutorial or an explanation that I missed/didn't read?
651
Development build produces source map files whereas production builds not. Source map files help us easily debug our application even after the files are compressed and compiled. It holds information about original files and can be used to map the code within a compressed file back to its position in source files.
Production mode minifies your code and better represents the performance your app will have on end users' devices. Development mode includes useful warnings and gives you access to tools that make development and debugging easier.
The production build creates minified bundles, lighter-weight source maps, and optimized assets. This improves the load time. React recommends using production mode while deploying the react app. We now know that production build helps in optimizing performance.
To optimize React rendering, you need to make sure that components receive only necessary props. It will let you control the CPU consumption and avoid over-rendering unnecessary features. The solution is to create a functional component that will collect all props and redistribute them to other components.
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.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
