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.

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:

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.

  1. Dynamic Gzip (not preferred)
  2. 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.

If you want to develop cool web apps like this, please contact us

To know what kind of process we follow for development, check the following link:

Development Process at CodeToArt

Do you have any product idea or business need?

How TO MAKE YOUR APP WORK OFFLINE

HOW TO MAKE YOUR APP WORK OFFLINE

Offline mobile app development is critical for users to sync their data properly, when offline. Here, we help you learn the process from implementation to data synchroniz

Omnivore POS integration - Ensuring Agility To Your Restaurant Businesses

Omnivore POS integration - Ensuring Agility To Your Restaurant Businesses

Omnivore software offers a point-of-sales integration API making the restaurant system agile, more customer engaging and adaptive to fast changing business environments.

Unit Testing using Mockk.io

Unit Testing using mockK.io in Kotlin

Learn about unit testing using mockk.io in Kotlin.