JS: The story of merging and minifying your code

The other day we started on a fresh project using PHP’s Laravel framework. The application in mind, a cycling toto, is quite complex, so we thought it would be the perfect moment to start applying the lessons learned about Javascript modules. The key thing here, is that we really wanted to write reusable code.

So instead of just creating script tags on the fly in our views and quickly scripting some jQuery to get things done, it was time to think about the type of pages we had and the different things we wanted to do on these pages using Javascript. This would make the application organised and structured and following the DRY principle of reusing code. We came up with at least the following tasks to be done in Javascript: making a wizard for selecting riders in a team, creating some charts, and adding social widgets. Of course this list will grow when we are working on the application though.

Then I stumbled on a question on Quora about merging files vs keeping them separate. Basically the question is something like this:

I know how to work with Javascript modules to keep my code organised and structured, but should I merge my Javascript files in one file for production or keep the files separate?

In this post I would like to discuss my view on this matter after reading through all the comments on Quora.

Reducing HTTP requests

Having a lot of small modules in your local project is a good thing. As said before, separating concerns and following the DRY principle will give you a solid code base in which it is fun to work because everything is organised and easy to understand as modules generally do just one thing. But when a visitor loads your website this is accompanied by a lot of extra HTTP requests to download all the small Javascript modules. This will take time and bandwidth and hence is bad for the performance of your page. Hence for a better performance it is best to merge your files into one and reduce the number of HTTP requests your page needs.

The problem of premature optimisation

Now wait just a minute! If we are talking about performance, make sure you work on the part that really performs bad. For example, improving the overall load speed of your Javascript a lot while having massive images that load very slow isn’t going to improve the overall loading time of your webpage. So keep this in mind.

Local environment vs production

That said, most answers on the Quora question follow this logic: In your local environment, split the Javascript files into modules for the ease of debugging, scaling and day to day work. Use some (automatic deployment) tool to bundle these scripts into one minified script on the production environment. These tools are found both online and from the commandline (e.g., Browserify, RequireJS, Webpack and so on). Also make sure the server is gzip enabled so that the gzipped minified code can be served. The latter can make a real difference.

Vendor packages and your app logic

Some answers were a bit more specific and talked about app code (your logic) vs vendor code (libraries such as jQuery, Underscore, Backbone, jQuery-ui etc.). Since it is assumed that the libraries aren’t updated as often as your own code base, it would make sense to package the vendor code in one file and your app code in another. This way, users only have to load the vendor package once (they will be cached) and changing the app code in between visits (and using some sort of versioning to prevent loading the old one from cache!), they only load the changed script. 

Conditional loading

Even more specific is conditional loading, which means that on a specific page only the Javascript modules needed for that pages are loaded. Here again it is worth noting that you should think before you optimize! If you are already use a bunch of vendor packages does it really make a difference if your app code can be decreased by a few tens of KBs by not loading parts of it on some pages?

How do they do it?

So now you know what you should do with regards to optimising your Javascript code for performance:

  • Either just concatenate all Javascript files and minify the resulting one, or
  • Use a module dependency loader with a build tool to bundle your Javascript if the project is more complex.

For the latter one I will discuss working with both RequireJS and Browserify in an upcoming post. Yes, I am using Browserify now and I think it is much simpler to set up and use in comparison to RequireJS.

Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! All posts
View all posts by Pim Hooghiemstra

Leave a Reply

Your email address will not be published. Required fields are marked *