упаковщик javascript против минификатора - PullRequest
16 голосов
/ 01 июля 2010

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

Пример кода:

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

Ответы [ 6 ]

17 голосов
/ 01 июля 2010

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

И еще труднее отлаживать.

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

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

15 голосов
/ 01 июля 2010

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

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

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

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

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

3 голосов
/ 10 июля 2014

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

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

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

3 голосов
/ 01 июля 2010

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

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

1 голос
/ 01 июля 2010

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

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

0 голосов
/ 29 февраля 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...