1. Microsoft Ajax Minifier
Автоматическая оптимизация JavaScript and
CSS для веб сайтов высокой
производительности
Евгений Чигиринский Октябрь 2010
eugench@microsoft.com

2. Что такое минификация и зачем она
нужна
• Рефакторинг JS и CSS файлов с уменьшением
размера файла без потери функциональности
• Экономия траффика
– Некоторые файлы можно сжать до 40-50% от
исходного размера.
• Увеличение скорости загрузки страницы

3. На что стоит обратить внимание
• Поддержка кода
– Потеря читабельности кода при слишком
аггрессивной минификации
– Ручная минификация может привести к
ошибкам в коде

4. На что стоит обратить внимание
• Gzip – иногда простое gzip-сжатие дает
приемлемый результат
– Во многих случаях комбинация из
минификации+gzip получается наиболее
оптимальной
– Все зависит от конкретного JS/CSS файла

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

6. Минификация JS
• Объявление и инициализация переменных
var x = new Object(); var x = {};
var y = new Array(); var y = [];
var z = new Array(a, b, c); var z = [a, b, c];
obj["foo"] = 3 obj.foo = 3
var i = 100000000 var i = 1e8

7. Минификация JS
• Объявление и инициализация переменных
var x1; var x1,x2,x3=10,x4;
var x2;
var x3 = 10;
var x4;
var y1; for (var y1,y2,i=0; ...)
var y2;
for (var i = 0; ...)
function foo() function foo()
{ {
var a = "bar"; return "bar";
return a;
} }

8. Минификация JS
• Switch блок
switch (myValue) switch (myValue)
{ {
case "a":
break; case "b":
a = b;
case "b": break;
a = b; case "f":
break;
a = f;
default: }
break;
case "f":
a = f;
break;
}

9. Минификация JS
• Блоки обработки исключений: удаление
пустого блока “finally” только если есть
блок “catch”
try try
{ {
... ...
} }
catch(e) catch(e)
{ {
... ...
} }
finally
{
}

10. Минификация JS
• Вызовы функций и блоков кода
function foo(a,b,c,d,e) function foo(a)
{ {
alert(a); alert(a);
if (A) A&&B();
B();
// B() - вызов функции
if (C) C;
return; }
}

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

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

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

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

15. Выводы
• Минификация позволяет существенно
уменьшить размер статического файла
– При чрезмерном увлечении минификацией в
коде, код тяжело поддерживать.
• Оптимальный вариант –
– минификация вручную +
– запуск приложений, которые делают
автоматическое сжатие как часть
сборки/билда.

16. Microsoft Ajax Minifier
• Автоматическая минификация JS и CSS
– Можно использовать как часть билда для
сборки или как API.
• Исходный код и исполняемые файлы
доступны на http://ajaxmin.codeplex.com

17. Q&A