Production builds have minified, uglified and obfuscated code. Also, the dead code and unwanted dependencies are eliminated. Due to this, the code size is lesser than the development. Using production build results in lesser payload transfer between server and client, and results in faster load of the application.

If you have installed the react devtools for Chrome, then it is easier to check  if your are using production build of the code.

Go to the react devtools page for Chrome, and install the extension (click on add to chrome).

React devtools for chrome

Once the plugin in added, you will get a notification that the extension has been installed.

If you open a react website like https://reactjs.org, then click on the react devtools icon, and it will show a popup stating that react production build is being used.

If you are running in development mode, then the popup would be something like this

Development build notification

How to make our code production ready?

There are two or three steps required to make a code production ready.

  • There should be no whitespace in the code. Usually your build system will do this for you if you set the mode as production.
  • The names of the functions and variables should be shortened or obfuscated to save space. It is good to have function names like changeStatusIssue in development, but there is no need to have these kind of descriptive names in production. It can be minified to some like a or b. There are plugins like uglifyjs which do this for you.
  • Code splitting - Instead of have a big fat module, and then waiting for that big module to download on client side and render, it can be divided into 2 or 3 modules. So that the modules can be downloaded faster. By combining lazy loading with code splitting, you can easily gain some performance in application.
  • Load modules only on demand - If you divide your applications into multiple modules with each module containing one route, then you will only have to load first module and its dependencies on load of app. If the user goes to some other route, then load that route module and its dependencies. It is also called lazy loading.
  • Dead code removal - It is good to remove the code that is not being used in production at all. Like if you are using lodash library, and you are only using one or two functions out of that library, then it does not make sense to include all the functions of that library in production build. Webpack supports tree-shaking, which essentially removes the dead code.

Configuring webpack to make code production ready

There are many build tools and task runners available in market. You have rollup, gulp, grunt and webpack. There are online build tools available as well, like turbo, which build your module in-browser and render it. These are widely used by the online editors for react or angular or other JS frameworks.

But for showing example, we will be using webpack.

Use production mode in webpack.config.js. By doing so, you will get following properties

// webpack.production.config.js
module.exports = {
+  mode: 'production',
- performance: {
-   hints: 'warning'
- },
- output: {
-   pathinfo: false
- },
- optimization: {
-   namedModules: false,
-   namedChunks: false,
-   nodeEnv: 'production',
-   flagIncludedChunks: true,
-   occurrenceOrder: true,
-   sideEffects: true,
-   usedExports: true,
-   concatenateModules: true,
-   splitChunks: {
-     hidePathInfo: true,
-     minSize: 30000,
-     maxAsyncRequests: 5,
-     maxInitialRequests: 3,
-   },
-   noEmitOnErrors: true,
-   checkWasmTypes: true,
-   minimize: true,
- },
- plugins: [
-   new TerserPlugin(/* ... */),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-   new webpack.optimize.ModuleConcatenationPlugin(),
-   new webpack.NoEmitOnErrorsPlugin()
- ]
}

If you are using webpack, then making the mode production is more than enough to have all the features. There might be some features like dead code removal which requires additional configuration. To enable dead code removal in webpack, you need to

  • Add "sideEffects": false, in package.json
  • Have the production mode true in webpack config
  • You must use 2015 imports and exports.