New trends in code bundling

By Kiran Reddy A

Problem Context: Page Loading Time:

Big players in the industry like Amazon and Walmart have observed that a 1 second improvement in the page load time provided increase in revenue. Also, loading delay may cause fewer page views, decrease in customer satisfaction and the user may not return to the website.


It is important for a website which is Customer facing and operationally intensive with respect to no of Visitors online and Transactions being handled by that website.


While there are various other aspects with respect to ensuring of Website uptime, performance and User Experience, there is one aspect which all website developers and Devops folks should do good i.e. proper bundling of Code and other Assets with respect to the website.


Developers generally refer to resources like JS files and sometimes other resources like CSS Files from other websites like CDNs and while page loading the request spans to other sites to load the resources and this adds to latency and page many times tends to load slower


Code bundling to the rescue:

Most of the web pages make multiple asynchronous requests to load multiples JS and CSS files. Each call has its own overhead (handshake, etc).  These calls can significantly degrade the page loading performance.  The performance is usually improved by bundling these JS and CSS files together into a single file. The overhead of multiple files is reduced to that of a single file.


But manually bundling these files is tedious and error prone.  There are tools that can automate the bundling process and prevent these mistakes.


Gulp and Grunt:

Gulp and Grunt are the most popular in this space. They both automate tasks, use Node.js, and they both are powerful and efficient. And they both do more than simply bundling files together.

Most common tasks that gulp and grunt can do:

1) Minifying, concatenating files into a single file

2) Compressing image files

3) Cleaning up the code by removing debug and console statements

4) Apply lint to the code to find errors


The cons of using these tools are:

1) They do not understand the dependencies among the files that they are bundling.

2) They depend heavily on plugins.

Hence managing the configuration gets complicated as the application grows.


Webpack is a new tool, emerged recently, that addresses these issues. Unlike Grunt and Gulp, webpack is a module bundler which puts assets like Javascript, images, fonts, and CSS in a dependency graph.  It uses CommonJS or ES6 to put the assets in real dependency graph.

A noteworthy feature of webpack is code splitting, which allows us to create code chunks and load them on demand. It has options for minification and sourcemaps for bundling. It provides a custom server named webpack-dev-server that can be run as middleware. The server supports both live reloading and hot reloading. By using loaders, we can add ES6 to ES5 transpilation, CSS pre- and post-processors and typescript transpiling.


In summary, we recognize that Webpack has more to offer in the context of code bundling process and is becoming the popular choice in online developer community.

Show Buttons
Hide Buttons
error: Content is protected !!