minify strategy

2007-10-04 @ 00:08#

now that i've spent some time playing with JSMin and my own CSSMinify, i am building a basic minifying strategy for production apps. the first step is to combine all the JS files and CSS files for a single HTML document into a single JS file and a single CSS file. this means that the HTML document only needs to download a single CSS file and a single JS file. next, the JS and CSS files need to be sent through a minifier to reduce the size of the file itself. finally, the web server need s to be sure to use GZip compression for the CSS and JS files to reduce the size of the data stream for browsers that support compression.

there is a downside to all this. it means minor changes to CSS styles could me rebuilding the deployment files for *lots* of pages (possibly hundreds). most of this problem can be reduced by separating the CSS/JS files into two groups: static and dynamic. in our production environment, clients can author their own CSS files to control the look and feel of their content. these CSS files woould continue to be delivered directly (possibly after minifying). however, the bulk of our CSS files (mainly those used for the default layouts and for all the admin pages) are static and can easily be used in a build process.

this is also true of our JS libraries. even though most of the JS files are already minified, a single page might employ several UI components along with at least one local script to handle UI functionality for that HTML page. this can result in more then ten separate files to download. while local caching (304) can reduce load times, reducing the total number of file to load can help quite a bit.

it'll take some time to work out the scripts, but i'm looking forward to getting this in place.