Microsoft Ajax MinifierАвтоматическая оптимизация JavaScript and CSS

для веб сайтов высокой производительности

Евгений Чигиринский Октябрь 2010eugench@microsoft.com

Что такое минификация и зачем она нужна

• Рефакторинг JS и CSS файлов с уменьшением размера файла без потери функциональности

• Экономия траффика– Некоторые файлы можно сжать до 40-50% от

исходного размера.• Увеличение скорости загрузки страницы

На что стоит обратить внимание

• Поддержка кода– Потеря читабельности кода при слишком

аггрессивной минификации– Ручная минификация может привести к

ошибкам в коде

На что стоит обратить внимание

• Gzip – иногда простое gzip-сжатие дает приемлемый результат– Во многих случаях комбинация из

минификации+gzip получается наиболее оптимальной

– Все зависит от конкретного JS/CSS файла

Минификация JS• Что можно сделать в первую очередь чтобы

минимизировать JS файл:– Комментарии– Пробелы и табуляция– Использовать короткие имена переменных– Debugger statements– Использовать кодировку ASCII или UTF-8• Unicode только увеличивает размер файла

Минификация JS• Объявление и инициализация переменных

var x = new Object(); var y = new Array();var z = new Array(a, b, c);obj["foo"] = 3var i = 100000000

var x = {};var y = [];var z = [a, b, c];obj.foo = 3var i = 1e8

Минификация JS• Объявление и инициализация переменных

var x1;var x2;var x3 = 10;var x4;

var y1;var y2;for (var i = 0; ...)

function foo(){ var a = "bar"; return a;}

var x1,x2,x3=10,x4;

for (var y1,y2,i=0; ...)

function foo(){ return "bar";}

Минификация JS• Switch блок

switch (myValue){ case "a": break; case "b": a = b; break; default: break; case "f": a = f; break;}

switch (myValue){ case "b": a = b; break; case "f": a = f;}

Минификация JS• Блоки обработки исключений: удаление

пустого блока “finally” только если есть блок “catch”

try{...}catch(e){...}finally{}

try{...}catch(e){...}

Минификация JS• Вызовы функций и блоков кода

function foo(a,b,c,d,e){ alert(a); if (A)

B();

// B() - вызов функции

if (C) return; }

function foo(a){ alert(a); A&&B();

C;}

Минификация CSS• Пробелы и табуляция• Комментарии• Удаление одинаковых селекторов• Сжатие селекторов– С одинаковыми именами– С большим набором одинаковых значений

• Удаление ненужных значений из определений отступа, цвета, длины и так далее

• Удаление “;” перед закрытием селектора

Минификация CSS• Сжатие селекторов#foo { color : Blue; color : Red; margin : 5 10 5 10}

...

#foo{ background-color : White}

#foo { color : Red; margin : 5 10; background-color : White}

Минификация CSS• Сжатие селекторов с разными именами#bar{ color : Blue; margin : 0; padding : 0;}...#foo{ color : Red; margin : 0; padding : 0;}

#foo,#bar{ color : Blue; margin : 0; padding : 0}#foo{ color : Red}

Минификация CSS• Сжатие значений#foo{ padding: 0px; margin: 10 10 10 10; color : #AABBCC;}

#foo{ padding: 0; margin: 10; color : #ABC}

Выводы• Минификация позволяет существенно

уменьшить размер статического файла– При чрезмерном увлечении минификацией в

коде, код тяжело поддерживать.• Оптимальный вариант – – минификация вручную +– запуск приложений, которые делают

автоматическое сжатие как часть сборки/билда.

Microsoft Ajax Minifier• Автоматическая минификация JS и CSS– Можно использовать как часть билда для

сборки или как API.• Исходный код и исполняемые файлы

доступны на http://ajaxmin.codeplex.com

Q&A