В небольшой заметке хочу поделиться ссылками на онлайн-сервисы для компрессии JavaScript и CSS файлов.

Packer

Сайт: http://dean.edwards.name/packer/

Начальный JavaScript:

// is.js

// (c) 2001 Douglas Crockford
// 2001 June 3


// is

// The -is- object is used to identify the browser.  Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}

Конечный JavaScript:

var is={ie:navigator.appName=='Microsoft Internet Explorer',
java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',
ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))
||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0)
{is.ie=is.ns=false;is.opera=true}if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true}

CSS Compressor

Сайт: http://shygypsy.com/cssCompress/

Пример исходного кода:

.counters 
{
    text-align: right;
}

table .noborder
{
    border: none;
}

table td .noborder
{
    border: none;
}

#socialDiv table,td,a,ul
{
    border: none;
    padding: 0px;
    background-color: transparent;
    text-decoration: none;
}

#socialDiv td.button
{
    width: 120px;
    height: 20px;
}

#socialDiv td
{
    vertical-align: middle;
}

После сжатия получаем:

.counters{text-align:right}table .noborder{border:none}table td .noborder{border:none}
#socialDiv table,td,a,ul{border:none;padding:0px;background-color:transparent;text-decoration:none}
#socialDiv td.button{width:120px;height:20px}#socialDiv td{vertical-align:middle}

Yahoo! YUI Compressor

Сайт: http://developer.yahoo.com/yui/compressor/

Сжимает с наибольшим коэфициентом.

Yahoo! UI Library: YUI Compressor for .Net - версия Yahoo! YUI Compressor для .NET. Есть поддержка MSBuild.

Пример программной компрессии CSS:

using Yahoo.Yui.Compressor;
...

string compressedCss;

// Note: string css == some cascading style sheet data loaded from some file, etc.
compressedCss = CssCompressor.Compress(css);  // No column width's specified.
// Column width of 73 specified, or nice reading if that's what you want.
compressedCss = CssCompressor.Compress(css, 73); 

Пример программной компресии JavaScript:

using Yahoo.Yui.Compressor;
...

string compressedJavaScript;

// Note: string javaScript == some javascript data loaded from some file, etc.
compressedJavaScript= JavaScriptCompressor.Compress(javaScript);  

Результат:

Этого должно быть досточно для сжатия ваших JavaScript и CSS файлов. Я же всегда пользуюсь http://javascriptcompressor.com/.