упаковщик JavaScript по сравнению с 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,{}))
16
задан Frédéric Henri 1 October 2015 в 06:59
поделиться

4 ответа

Packed меньше, но медленнее.

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

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

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

17
ответ дан 30 November 2019 в 16:30
поделиться

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

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

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

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

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

15
ответ дан 30 November 2019 в 16:30
поделиться

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

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

3
ответ дан 30 November 2019 в 16:30
поделиться

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

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

1
ответ дан 30 November 2019 в 16:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: