Подтвердить что ты не робот

Javascript packer против minifier

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

Пример кода:

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,{}))
4b9b3361

Ответ 1

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

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

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

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

Ответ 2

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

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

Для хорошего minifier, я хотел бы использовать Google Closure Compiler http://code.google.com/closure/compiler/

Режим SIMPLE_OPTIMIZATIONS - это то, что я бы рекомендовал использовать, поскольку он очищает переменные whitespace/comments и munges (уменьшает). Он также выполняет некоторые простые изменения кода, которые в основном сводятся к очистке кода и микро оптимизации. Об этом вы можете узнать в начале работы с приложением компилятора Closure или проверка упакованного README.

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

Ответ 3

Оба предназначены для снижения размера JavaScript для быстрой загрузки в браузере клиента.

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

Ответ 4

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

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

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

Ответ 5

В зависимости от упакованного кода упакованное решение ca приводит к script -errors, в то время как сокращенный будет работать.

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

Ответ 6

"Пакер" - это то же самое, что и "minifier". Наиболее распространенным инструментом, называющим себя "упаковщиком", является http://dean.edwards.name/packer/, который дает опцию (по умолчанию отключена) для кодирования base62. Base62 кодирование, вероятно, плохая идея: fooobar.com/info/253766/....