In the current time and hopefully the future as well, we will constantly see increasing bandwidths for the networks, be it broadband networks or mobile networks that allow for faster downloading of resources in parallel. But for every resource that needs to be fetched from a remote server, there is still some network latency involved due to the fact that every separate resource demands a separate request to be made to the server. This latency can bite when there are a lot of resources that need to be loaded and when the user is on a high latency network.

Usually, most modern web applications heavily utilize JavaScript for a wide set of purposes, which may include input validation, dynamically generating content, and so on. All of this functionality is split into multiple files, which may include some libraries, customized code, and so on. Although having all of these split into different files can help in parallel loading, sometimes the JavaScript files contain code for generating dynamic content on the web page, which may block the rendering of the web page until all the necessary files required for successfully rendering the page are not loaded.

One of the possible ways through which we can reduce the amount of time a browser takes to load up these script resources is to bundle them all together into a single file. This allows all the scripts to be combined into a single large file that the browser can fetch in a single request. Although this may cause the user a bit of a slow experience when they first visit a website, once the resource has been fetched and cached, the subsequent loads of the web page will be significantly faster for the user.

Today, a lot of third-party libraries are available that allow us to bundle this JavaScript. Let's take an example of a simple tool called Browserify, which allows us to bundle our JavaScript files. For example, if we had multiple JavaScript files, such as jquery.js, image-loader.js, slideshow.js, and input-validator.js, and we want to bundle these files together with Browserify, all we have to do is run the following command:

browserify jquery.js image-loader.js slideshow.js input-validator.js > bundle.js

This command will create a bundle of these JavaScript files into a common file known as bundle.js, which can now be included in our web application through the use of a simple script tag like the following:

<script type="text/javascript" src="js/bundle.js"></script>

With the JavaScript bundled to load up in one request, we may start seeing some improvements in terms of how quickly a page is fetched and displayed to the user in the browser with the subsequent page loads. Now, let's take a look at one other interesting topic that may be of a good use to really make a difference in how quickly our web application loads up for repeated visits to the website.