Упаковщик javascript против минификатора

Мне было интересно, каковы различия/преимущества упаковщика и минификатора, т. е. следует ли развертывать упакованную или минимизированную версию в своем веб-приложении?

Пример кода:

var layout = {

    NAVVISIBLE : 1,

    Init : function() 
    {
        this.Resize();
    },

    Dimensions : function()
    {
        var d = document, s = self, w, h;
        if (s.innerHeight) 
        { w = s.innerWidth; h = s.innerHeight; }
        else if (d.documentElement && d.documentElement.clientHeight) 
        { w = d.documentElement.clientWidth; h = d.documentElement.clientHeight; }
        else if (d.body) 
        { w = d.body.clientWidth; h = d.body.clientHeight; }
        return new Array(parseInt(w), parseInt(h));
    },

    Resize : function()
    {
        var dim = this.Dimensions();
        try 
        {
            $('tbl_container').width    = px(dim[0] - 25);
            $('row_container').height   = px(dim[1] - 100);
            $('dat_container').width    = px(dim[0] - (this.NAVVISIBLE ? 275 : 25));
            $('dat_container').height   = px(dim[1] - 100);
        } 
        catch(e) {}
    },

    GoSideways : function()
    {
        var nc = $('nav_container');
        var dc = $('dat_container');
        nc.style.display = this.NAVVISIBLE  ? 'none' : '';
        dc.width = px(parseInt(dc.width) + (this.NAVVISIBLE ? 250 : -250));
        this.NAVVISIBLE ^= 1;
    },

    FrameLoad : function(url)
    {
        if (url) 
            content_frame.document.location = url;
    }
};

уменьшенный:

var layout={NAVVISIBLE:1,Init:function()
{this.Resize();},Dimensions:function()
{var d=document,s=self,w,h;if(s.innerHeight)
{w=s.innerWidth;h=s.innerHeight;}
else if(d.documentElement&&d.documentElement.clientHeight)
{w=d.documentElement.clientWidth;h=d.documentElement.clientHeight;}
else if(d.body)
{w=d.body.clientWidth;h=d.body.clientHeight;}
return new Array(parseInt(w),parseInt(h));},Resize:function()
{var dim=this.Dimensions();try
{$('tbl_container').width=px(dim[0]-25);$('row_container').height=px(dim[1]-100);$('dat_container').width=px(dim[0]-(this.NAVVISIBLE?275:25));$('dat_container').height=px(dim[1]-100);}
catch(e){}},GoSideways:function()
{var nc=$('nav_container');var dc=$('dat_container');nc.style.display=this.NAVVISIBLE?'none':'';dc.width=px(parseInt(dc.width)+(this.NAVVISIBLE?250:-250));this.NAVVISIBLE^=1;},FrameLoad:function(url)
{if(url)
content_frame.document.location=url;}};

упаковано:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5 B={3:1,C:6(){2.n()},v:6(){5 d=k,s=y,w,h;9(s.u){w=s.A;h=s.u}r 9(d.a&&d.a.c){w=d.a.p;h=d.a.c}r 9(d.b){w=d.b.p;h=d.b.c}D z x(g(w),g(h))},n:6(){5 7=2.v();F{$(\'N\').8=4(7[0]-o);$(\'P\').m=4(7[1]-l);$(\'i\').8=4(7[0]-(2.3?E:o));$(\'i\').m=4(7[1]-l)}L(e){}},H:6(){5 t=$(\'I\');5 j=$(\'i\');t.J.G=2.3?\'Q\':\'\';j.8=4(g(j.8)+(2.3?q:-q));2.3^=1},M:6(f){9(f)O.k.K=f}};',53,53,'||this|NAVVISIBLE|px|var|function|dim|width|if|documentElement|body|clientHeight|||url|parseInt||dat_container|dc|document|100|height|Resize|25|clientWidth|250|else||nc|innerHeight|Dimensions||Array|self|new|innerWidth|layout|Init|return|275|try|display|GoSideways|nav_container|style|location|catch|FrameLoad|tbl_container|content_frame|row_container|none'.split('|'),0,{}))

person user318747    schedule 01.07.2010    source источник
comment
Не забудьте также Google Closure Compiler... Существует множество JS-библиотек, использующих это для их сжатия, а не для минимизации или упаковки (jQuery использует это!).   -  person gnarf    schedule 01.07.2010


Ответы (6)


Упакованный меньше, но медленнее.

И еще сложнее отлаживать.

Большинство известных фреймворков и плагинов только минимизированы.

Взгляните на минификатор Google: http://code.google.com/intl/en-EN/closure/compiler/ Они предлагают плагин firebug для отладки минимизированного кода.

person jantimon    schedule 01.07.2010
comment
Google Closure Compiler часто создает файлы большего размера, чем Microsoft Ajax Minifier по моему собственному опыту, если только вы не используете флаг ADVANCED_OPTIMIZATIONS, который, скорее всего, нарушит ваш код и не очень практичен в производственной среде. Я призываю людей использовать оба упомянутых выше инструмента и использовать код меньшего размера. - person thdoan; 22.01.2014
comment
@ 10basetom Почему бы не использовать оба вместе? Сначала сделайте GCC, а затем MAM. Инструмент Microsoft, похоже, вырезает еще несколько байтов из кода, созданного GCC. - person tomasz86; 29.05.2016

Packer делает больше, чем просто переименовывает переменные и аргументы, он фактически отображает исходный код, используя Base62, который затем должен быть перестроен на стороне клиента с помощью eval(), чтобы его можно было использовать.

Обход eval() здесь является злой проблемой, это также может создать большие накладные расходы на клиенте во время загрузки страницы, когда вы начинаете упаковывать большие библиотеки JS, такие как jQuery. Вот почему рекомендуется делать минимизацию только на вашем производственном JS, поскольку, если у вас достаточно кода для упаковки или минимизации, у вас достаточно кода, чтобы заставить eval() задушить клиента во время загрузки страницы.

В качестве хорошего минификатора я бы использовал Google Closure Compiler http://code.google.com/closure/compiler/

Режим SIMPLE_OPTIMIZATIONS — это то, что я бы рекомендовал использовать, так как он очищает пробелы/комментарии и удаляет (уменьшает) переменные. Он также вносит некоторые простые изменения в код, которые в основном сводятся к очистке кода и микрооптимизации. Вы можете узнать больше об этом в разделе Начало работы с приложением Closure Compiler или в пакетном файле README.

YUI Compressor — еще один вариант (от Yahoo), но он не уменьшает размер файла так сильно, как CC. Существует также инструмент от Microsoft, название которого я сейчас упускаю из виду, но, по-видимому, он дает такие же результаты, что и CC. Этот вариант может быть лучше или хуже, в зависимости от вашей среды. Я только читал об этом мимоходом, так что потребуется дальнейшее расследование.

person tsgrasser    schedule 01.07.2010

Если ваш сервер сжимает файлы перед отправкой их в браузер (что бывает очень часто), тогда упаковщик не подходит. Я протестировал несколько файлов, и хотя упаковщик делает файлы меньшего размера, чем минификация, он создает большие заархивированные файлы. Хотя я не эксперт, я думаю, что причина довольно проста.

Большая часть сжатия заключается в том, чтобы найти повторяющиеся последовательности символов и заменить их более коротким заполнителем, который будет распакован позже. Это то же самое, что делает упаковщик, за исключением того, что алгоритмы zip намного эффективнее. Таким образом, когда вы упаковываете файл, вы предварительно архивируете его, но с алгоритмом, который менее эффективен, чем настоящий zip-файл. Это оставляет меньше работы для алгоритма zip с последующим снижением эффективности zip.

Поэтому, если вы заархивируете файлы, упаковщик фактически будет производить загрузки большего размера. Добавьте к этому дополнительные недостатки упаковщика, упомянутые в приведенных выше ответах, и на самом деле нет веской причины использовать упаковщик.

person Conor Mancone    schedule 10.07.2014

Оба направлены на уменьшение размера JavaScript, чтобы обеспечить быструю загрузку в клиентском браузере.

Minifier удаляет только ненужные вещи, такие как пробелы и переименование переменных в более короткие имена, где это возможно. Но упаковщик идет еще дальше и делает все возможное, чтобы минимизировать размер JavaScript. Например, он преобразует исходный код в Base62, сохраняя при этом сопоставления для оценки клиентом.

person IsmailS    schedule 01.07.2010
comment
Минификаторы обычно также переименовывают переменные. - person mhenry1384; 29.02.2012
comment
Согласованный. Многие минификаторы также предоставляют возможность для этого. - person IsmailS; 01.03.2012

В зависимости от запакованного кода упакованное решение может привести к ошибкам скрипта, в то время как минифицированное будет работать.

Поэтому протестируйте в разных браузерах после упаковки кода. Если это больше не работает, попробуйте уменьшенную версию, которая всегда должна работать.

person JochenJung    schedule 01.07.2010

«Упаковщик» — это то же самое, что и «минификатор». Наиболее распространенный инструмент, который называет себя «упаковщиком», — это http://dean.edwards.name/packer/ который дает возможность (отключена по умолчанию) для кодирования base62. Кодировка Base62, вероятно, плохая идея: https://stackoverflow.com/a/1351624/24267.

person mhenry1384    schedule 29.02.2012
comment
Упаковщик — это не то же самое, что минификатор. Packer требует, чтобы клиент eval и перестроил javascript, прежде чем его можно будет использовать. Таким образом, хотя упаковщик может сжимать данные лучше, чем минификатор, он потенциально может работать медленнее. - person Jake Wilson; 23.03.2013
comment
Если у вас отключена кодировка base62 в упаковщике Dean Edwards, она не требует оценки на стороне клиента. Он отключен по умолчанию. - person mhenry1384; 24.03.2013