Looking for a bolt on DJango app to compress/minify your JavaScript and CSS files? I created the staticcomp Django app for just that purpose.
Benefits:
- Ability to compress/minify JS/CSS files on-demand
- Increase website performance by reducing the total number of JS/CSS file requests
- Build modular JS/CSS files by page / section instead of relying on large files
- No need to use date-based file names or query string values to force the browser to download changes to your JS/CSS files
- Improved Google Page Speed score and SEO benefits from a faster overall website
- Integrated with UglifyJS, the same JavaScript compressor used by jQuery
- Allows you to create your own backends or use one of the four existing
Prerequisites
- You need to be running a backend cache service like Memcache.
- Need a web server like Apache or Nginx that can integrate with the cache backend
- Python 2.6+
- Django 1.2 or 1.3
- Node.js
From a frontend development standpoint, the app provides the benefit of taking dozens of CSS files and compressing them all on the fly. This will allow you to create many small CSS files and include them in just the applicable templates with on-demand compression.
The same goes for JavaScript development. You can create smaller JS files and only include them where needed.
View the staticcomp app source code on github.
This website uses the app. View the source and you’ll see the JS and CSS compressed urls. When you view the source of each, you’ll see the number of files that have been included per url.
Example template usage:
{% load jscomp_tags %}
{% jscompfile common js/jquery-1.6.2.js %}
{% jscompfile common js/thepiepers.js %}
{% jscompfile common js/blog.js %}
{% jscompoutput %}
The above example will compress the three JS files together and output them as one url.
If you are looking to combine your CSS files:
{% load csscomp_tags %}
{% csscompfile common css/html5.css %}
{% csscompfile common css/thepiepers.css %}
{% csscompoutput %}
Just like the JS example, the CSS syntax performs the same behavior and will combine the two files into one request after they have been compressed.
Once you install, apply the settings as shown in the README file and you are on your way to a faster website!