Question

I have had some thoughts recently on how to handle shared javascript and css files across a web application.

In a current web application that I am working on, I got quite a large number of different javascripts and css files that are placed in an folder on the server. Some of the files are reused, while others are not.

In a production site, it’s quite stupid to have a high number of HTTP requests and many kilobytes of unnecessary javascript and redundant css being loaded. The solution to that is of course to create one big bundled file per page that only contains the necessary information, which then is minimized and sent compressed (GZIP) to the client.

There’s no worries to create a bundle of javascript files and minimize them manually if you were going to do it once, but since the app is continuously maintained and things do change and develop, it quite soon becomes a headache to do this manually while pushing out new updates that features changes to javascripts and/or css files to production.

What’s a good approach to handle this? How do you handle this in your application?

Answer 1

What you are talking about is called minification.

There are many libraries and helpers for different platforms and languages to help with this. As you did not post what you are using, I can’t really point you towards something more relevant to yourself.

Here is one project on google code – minify.

Here is an example of a .NET Http handler that does all of this on the fly.