How to load React Web App faster?

Most of the front developers use React because it simplifies the process of performing UI renders, but React apps of considerable size can sometimes take more loading time to load the webpage. To load the React web app faster or improve performance, and must be appropriately configured. We Recently developed a React web app named eProcessify web app, which was developed for Task management, Process management, or where we follow SOP's (Can be used by any industry such as Chartered accountants, travel, digital marketing, etc.) It had got some performance issues, and website loading time was higher. So check out how we improved the speed and performance of the website below.

(More information about eProcessify web app can found at our website here.)

How React Web AppInternally Works?

As you all know, to deploy react app we need to build the app and combine all components and CSS files into minified versions, which convert them into respective bundles! In React, bundles are generated into two types of files.

Minified versions of JavaScript files (bundle.js)
Minified versions of CSS files (style.css)

After deploying the website, every feature was working nicely.

Where was the problem then?

After deployment, we noticed our web app loading time was more than that it should have been. (around 2 to 3 mins). We noticed bundle.js file generated while building the app was more than 7MB in size. So offcourse, that increases waiting time to load the website. Because of this issue, the user might lose interest in revisiting our site!

How We Resolved issue?

We Resolved this issue by compressing our bundle.js files, which was the culprit of faster load time. There multiple ways available to perform this task, such as:

Find a way to use heavy libraries used in projects.
Serve Gzipping
Code Splitting methods and many others

We compressed our bundle.js using the Gzipping method.

Serve Gzipping – Types and How to use it?

This method dramatically reduces the size of bundle.js. There are two ways to do this.

Dynamic Gzip (not preferred)
GzipWhile building (preferred)

1. Dynamic Gzip (Mostly not used / Not Preferred)

You need to add the 'Compression' plugin to your app. This compresses the bundle.js file dynamically and serves it.

npm install compression //installation
var compression = require(‘compression’); //import to app	
app.use(compression());

2. GZip while building the app

In this method, we will be generating bundle.js.gzinsteadof bundle.jsusing a webpack compression plugin.

1. Install following plugin
     npm install compression-webpack-plugin 
2. Add plugin to webpack.config.js file
     varCompressionPlugin = require(‘compression-webpack-plugin’);
3. Add this to plugins of webpack.config.js files
     plugins: [
       newwebpack. DefinePlugin({
         …..
        ….
      }),
     newCompressionPlugin()
]

Also, you need to configure gzip on the webserver to start serving bundle.js.gz instead bundle.js

This magically reduced bundle size from 7MB to just ~400kb. Yes, you heard it correctly! So that resulted in faster loading of the webpage in seconds! See the below chart to get the idea of bundle.js file size before and after applying Gzipping.