How to load React Web App faster?

ReactJS framework is a new step forward that has provided the front-end developer to come up and build a new Web App that can update and perform in a better way.

So here, we have recently developed ReactJS + Redux web app, CAMighty, which is exclusively for CA (Chartered Accountants) /CS/CMA’s community. With the help of this App, you can discuss real-life cases & problems and get opinions from some of the top-notch industry experts and best CA/CS/CMA’s.

As you know, to deploy any of the websites, we need to create bundle files which are used to group and comprise the same set of files of the same type in order to limit the size of data that has to be downloaded by the browser.

In the web, the bundle is generated for 2 types of files i.e. JavaScript files (bundle.js) and CSS files (styles.css). Basically, the bundle is a minified version of the source.

At first, when we tried to generate bundle.js for deployment its size was more than 7MB. For an instance, if such huge bundle.js file will be deployed, the web page loading time will be more than the expected time frame. These timing can be in between 30 seconds to 1-2 minutes or more depending on the speed of internet, which is very high and the user may lose their interest to visit your site.

Therefore, we resolved this issue by our own designed compressing bundle.js, which works by using different methods.

There are different ways to complete this task that includes:
• Find a way to use heavy libraries used in projects
• Serve Gzipping
• Code Splitting methods and many others.

Let’s check-out how Gzipping can use compress our bundle.js!

It can dramatically reduce the size by Gzipping the bundle.js in two ways:
1. Dynamic Gzip (not preferred)
2. Build-Time Gzip (preferred)

1. Dynamic Gzip (not preferred)

You can add Compression plugin to your App. This will dynamically compress the bundle.js and serves it. But, it will add to CPU and performance.

[java]npm install compression –save //install

var compression = require(‘compression’); //import to express app
app.use(compression());//add this as the 1st middleware[/java]

2. Build time Gzip (preferred)

Instead of generating bundle.js, generate bundle.js.gz by using Webpack’s compression plugin.

1. Install the Webpack compression plugin

[java] npm install compression-webpack-plugin –save-dev[/java]

2. Import the plugin to Webpack.config.js

[java]var CompressionPlugin = require(‘compression-webpack-plugin’);[/java]

3. Add it to plugins array

[java] plugins: [

new webpack. DefinePlugin({

…..
….
}

}),

new CompressionPlugin()

]
[/java]

As we are using Nginx server to serve the websites on Digital Ocean, it needs to be configured on the web server as well so that will start loading bundle.js.gz instead of bundle.js

Please note that the configuration should loaf .js .gz or .js which depends on the browser if it accepts Gzip.

And magically it reduced my application size from 7MB to just ~400KB 🙂

Note: There are other ways to improve it further which will be coming up in the next future post

So stay tuned. 🙂

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