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 y = new Array();
var z = new Array(a, b, c);
obj["foo"] = 3
var i = 100000000
var x = {};
var y = [];
var z = [a, b, c];
obj.foo = 3
var i = 1e8

7. Минификация 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";
}

8. Минификация 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;
}

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

10. Минификация 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;
}

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

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

13. Минификация 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
}

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

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

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

17. Q&A