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:

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.

npm install compression –save //install
var compression = require(‘compression’); //import to express app	
app.use(compression());//add this as the 1st middleware


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

 npm install compression-webpack-plugin –save-dev


2. Import the plugin to Webpack.config.js

var CompressionPlugin = require(‘compression-webpack-plugin’);


3. Add it to plugins array

 plugins: [
new webpack. DefinePlugin({
…..
….
}
}),

new CompressionPlugin()
]

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

Do you have any product idea or business need?

Apples In-App Purchase

Hands-On Implementation of Apple’s In-App Purchases On Ruby Based Server

Information about Languages & Tools, Server Configuration and Endpoint & API Setup and many more.

Multi User Chat

Features of Multi User Chat (Group Chat) in Android

Features allows users to visible multiple chatrooms on one or more screens.

android Logs

Simple way to write android Logs

Complete process of writing logs in a simplified way and how to effectively get rid of logs during app release.