The idea behind modules
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.
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
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
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.
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.