Don’t get me wrong, JavaScript is amazing. But the first release was designed and created in 10 days. No one envisioned that it would one day take over the web and morph into a very special giant that needs a little bit of organization.
That’s where bundling comes in. Bundling tools such as Webpack and Browsify organizes and puts all your JavaScript, HTML, CSS, images and everything else in between together in a handful of neat little files to help make your web application run smoothly. These bundling tools comes pre-baked into Angular and React CLIs.
The idea behind modules
JavaScript came out with the ability to use modules back in ES6. However, it took browsers a bit of time to catch up. Chrome, for example, implemented support in mid 2017, two years after modules was first released as a language feature. Sometimes, technology might seem like it’s moving fast but adaptation speed can sometimes be slow.
But before we continue on, what exactly are modules?
Modules is a method of organizing large bodies of code that allows for the developer to segment and mentally digest a particular part of the application. It gives you the ability to use bits of code in one file and create code to be used in another. The point of modules is to give developers the ability to easily create modularity.
However, importing poses another issue. Under normal circumstances, JavaScript is often used in the front end in conjunction with HTML and CSS. This means that if you want to run your code, you’re going to need a bunch of script tags. Next thing you know, your entire page is littered with all the tiny little modules you wrote. It gets worse when you start adding libraries which have their own dependencies. Now imagine having to figure out which one is needed and which one aren’t, and in what rendering context.
Things can get messy really quickly.
That’s where bundling comes in. Bundling tools deal with all that drama and packages things up, minify it for you and ensure that all the house keeping required to keep things working as expected.
Bundling like it’s a seamless and native thing
There is no native way to ‘build’ a JavaScript application. This isn’t like C++ or Java where you need to compile the program to make it work. The point of JavaScript is that it runs on the fly in the browser — efficiency is not part of the original equation.
‘Building’ a JavaScript application is more to do with minifying the current application and creating a streamlined output. It’s not concerned about human readability or comprehension, shortening your values and variables in places that it can. Bundling tools like Webpack are merely repackaging up ECMAScript in a form that is much more efficient in terms of final produced file. Your trusty console is often the portal into performing this fantastic act of calculated magic.
A bundle is the output of a process that merges everything into a few (if not single) file in the most optimized manner.
Lets talk about Webpack
Every bundling tool has their own method of compacting things into a nice little ‘bundle’. Webpack is the tool that’s baked into Angular CLI generated projects and acts as the tool that puts all of your assets — JavaScript, images, fonts, css and anything else you can think of into a thing called a dependency graph.
In the early days, we kept all of our JavaScript dependencies by including them through script tags in our HTML page. These script tags also have to be in a particular order or else the application won’t work.
If you’ve had the pleasure of coding in the early 2000s, the following ‘includes’ should look familiar to you.
<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>
<script src="header.js"></script>
<script src="mainbody.js"></script>
<script src="starpower.js"></script>
<script src="slowflakeeffect.js"></script>
<script src="carousel.js"></script>
<script src="amillionmorefileslater.js"></script>
<script src="footer.js"></script>This often results in a mindfield for developers, especially when scripts are split between top and bottom of the page. The excessive HTTP requests also reduces the page speed.
A dependency graph is made possible through ES6 modules that allows us to create small files that explicitly describe what it needs. When you run Webpack on your app, it goes through your entire application and creates a code version of a dependency graph that maps out requirements for a particular block of code.
The difference between Webpack, Grunt and Gulp is that the later two doesn’t support images and only works with files. Grunt and Gulp also has no concept of a dependancy graph. The benefits of having a dependency graph is that Webpack can eliminate dead assets — you know those stray bits of code that you’ve written but never used. Webpack eliminates this and only builds the CSS and images you actually need.
The only drawback with Webpack is that documentation is not that great. However, both React and Angular come with Webpack pre-baked into CLI generated application. This means that you only need to run the build command and viola! — everything is ready to go inside your dist folder.
Final Words
It’s not the best practice to ship your application as-is. It may seem fast on your localhost but in reality, there are hidden struts and beams to compile and string together the application you’ve created. All that dead space and code does eventually add up to the final size and when it comes to speed, the quicker your app is able to load, the better it is for your user experience.
Bundling is an important concept and while most of it is automated these days, it still good to have an idea about what exactly it does in the process.
