Most web developers know that including lots of JS and CSS files in their sites slow page load times down. Most also know that these files should be minified and bundled into one file on production sites. Most developers don’t do this though. It’s a lot of extra steps in putting your new changes live.
Also, using CDNs or setting expiry times into the future for mostly static files such as CSS and JS also significantly improves page load as clients will grab these files once and use their local cache until their expire. This also poses issues for web developers that is easily overcome by versioning these files – literally adding a version number to the bundles – for example min.bundle-v6.css would be version 6 of the CSS minified and bundled file.
We’ve been doing both of these for a long time with the sites we build. We’ve now generalised, documented and packaged the tool we use for this and released it under a BSD license so others can benefit. See our page on GitHub to download this tool and for examples of its use:
https://github.com/opensolutions/Minify
This tool will:
- automatically find all CSS/JS files in a given directory namedÂ
xxx-blah.css whereÂxxx is a three digit ordering / sequence number; - minify these files and create a single file bundle including them in the correct order;
- automatically generate template include files allowing production / development mode (i.e. use individual CSS/JS or bundles based on an application option);
- versioning for those using CDNs, future expiry dates, etc to ensure clients load fresh JS/CSS bundles.
If you use it, please drop us a note to let us know how you get on!Â