Маньячная минимизация (в погоне за байтом)

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

z=null; и заменить везде null на z, размер должен немного уменьшиться. Хотя, возможно, Вы назовете это грязным трюком…

очевидным будет замена true и false на 1 и 0 соответственно, т.к. strict equal я нигде не вижу — это даст 31 байт экономии; если автору требуется чтобы переменные содержали настоящий буль, то заменить на !0(true) и !1(false), что даст более скромный выигрыш в 22 байта

typeof this.x == «undefined» => this.x === undefined. Ещё в функциях из одного ифа отлично использовать тернарник.

Я не проверял, но что, если добавить функцию var l=function(s){return s.length;} и все *.length заменить на l(*)?

Как так получилось, что из
if ( --a == 0 )
стало
if ( --a )
?

А почему YUI, а не GCC? У меня он сильно лучше работал (правда, на несколько больших проектах — под 200кб). Да, для него надо готовить код (а лучше — заранее писать имея его в виду), а результат — обязательно тестировать, но зато результат…

Как из
var a = [];
for ( var i in someEnum ) {
a[ i ] = 0;
}

Получилось
var a = [ 0, 0, 0 ];
?
Или в цикле должно быть a[someEnum[i]] = 0?

Мрак мрак мрак. После того уже невозможно работать с исходным, до минимизации, кодом — он превратился в нечитаемую кашу.
Зачем вообще тогда их разделять? Работайте и пишите сразу как выход js minimizer :)

А если сжать с помощью uglify-js?

Существует индийский контест, Time Limit Exceeded, который награждает не за правильность решения (хотя это необходимое условие), а за его длину, количество использованных точек с запятой, требует решения-палиндрома и т.д. Может, вам понравится? :-) Правда, там только C/C++.

Функции window.funcName можно заменить на просто funcName

Кому-нибудь будет интересно: blog.foxxtrot.net/2010/12/a-comparison-of-javascript-compressors.html

Jed, автор «фремворка» (fab) недавно устраивал конкурс — «фреймворк в твите» 140byt.es/, и к нему давал набор рекомендаций о том, как можно минимизировать руками код.

Очень рекомендую прочитать внимательно каждый пунктик: https://github.com/jed/140bytes/wiki/Byte-saving-techniques

Я уверен, найдете как еще ужать код :)

Ну и там есть просто охренительные твиты, несколько из которых я уже использую активно :)

var = true; var = !0;
var = false; var = !1;

var = parseInt('12'); var = +'12';

GWT вам в руки :)

Дайте прямую гиперссылку на сырой неупакованный код, пожалуйста.

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

Первое, что хочется сказать — не используйте YUI компрессор, он практически не делает оптимизаций, да и вообще проект не развивается. Могу посоветовать Google Closure Compiler или UglifyJs (по ссылке кстати есть сравнительная таблица минимизаторов), сам пользуюсь первым.
Closure дает такие результаты (воспользуйтесь online-версией если хотите)
Original Size: 24.69KB (6.85KB gzipped)
Compiled Size: 6.65KB (1.95KB gzipped)
или для Advanced оптимизаций
Compiled Size: 4.18KB (1.67KB gzipped)
Последний вариант, впрочем, скорей всего будет неработоспособным, так как код должен быть специальным образом написан, чтобы сохранить публичные свойства и методы. Однако показывает вам чего вы можете добиться «на ровном месте», просто используя правильный инструмент и оставляя ваш код читаемым что важно для его дальнейшего развития.
Так, например, многие оптимизации такие как сокращение имен переменных и сведение к одному var делают оптимизаторы, и более эффективно — поэтому нет смысла это делать самому.
Плохая сжимаемость вашего кода (а он безусловно еще может быть сжат больше) обусловлена в первую очередь тем, что он сам по себе плох и плох для минификаторов. А ваши оптимизации это экономия на спичках или не экономия вообще.
Например вы оптимизируете код:

kernel._getAbsolute = function( path, childPath ) {
    // concatinating path with the child's path (without the filename)
    // path starting from "http://" or "https://" treated as absolute
    if ( path.substr( 0, 7 ).toLowerCase() != "http://" &&
         path.substr( 0, 8 ).toLowerCase() != "https://" ) {
        path = childPath.substr( 0, childPath.lastIndexOf("/") + 1 )
            + path;
    }

    // resolving (clearing) up-dir sequences such as "foo/../"
    var newPath = path;
    do {
        path = newPath;
        newPath = path.replace( /[\w\.~]*\/\.\.\//, "" );
    } while ( newPath != path );

    return path;
}

Таким образом:

var ... , http = "http" ...
kernel._getAbsolute = function( path, childPath, newPath ) {
    // concatinating path with the child's path (without the filename)
    // path starting from "http://" or "https://" treated as absolute
    if ( path.substr( 0, 7 ).toLowerCase() != http  + "://" &&
         path.substr( 0, 8 ).toLowerCase() != http  + "https://" ) {
        path = childPath.substr( 0, childPath.lastIndexOf("/") + 1 )
            + path;
    }

    // resolving (clearing) up-dir sequences such as "foo/../"
    newPath = path;
    do {
        path = newPath;
        newPath = path.replace( /[\w\.~]*\/\.\.\//, "" );
    } while ( newPath != path );

    return path;
}

Посмотрим что вы сэкономили (при условии что все переменные станут однобуквенными).
На «http», было:

"http://""https://"

стало:

,x="http"x+"://"x+"s://"

Не хочу вас расстраивать, но вы потеряли 5 байт. А на newPath вы сэкономили лишь 2 байта, убрали var и пробел, но в объявлении функции добавилось имя переменной и запятая.
Итого выигрыш -3 байта. То есть вы сделали код больше на 3 байта.
Ок. Перепишем немного:

kernel._getAbsolute = function( path, childPath ) {
    // concatinating path with the child's path (without the filename)
    // path starting from "http://" or "https://" treated as absolute
    if (!/^https?:\/\//.test(path)) {
        path = childPath.replace(/[^\/]+$/, '') + path;
    }

    // resolving (clearing) up-dir sequences such as "foo/../"
    var prevPath;
    while (prevPath != path){
        prevPath = path;
        path = path.replace( /[\w\.~]*\/\.\.\//, "" );
    }

    return path;
}

И получим 153 байта, то есть сэкономили 76 байт (по сравнению с вашим вариантом).
Результаты:

// оригинал
// Original Size:	558 bytes (334 bytes gzipped)
// Compiled Size:	226 bytes (187 bytes gzipped)

kernel._getAbsolute=function(a,c){a.substr(0,7).toLowerCase()!="http://"&&a.sub
str(0,8).toLowerCase()!="https://"&&(a=c.substr(0,c.lastIndexOf("/")+1)+a);var 
b=a;do a=b,b=a.replace(/[\w\.~]*\/\.\.\//,"");while(b!=a);return a};

// ваша оптимизация
// Original Size:	571 bytes (342 bytes gzipped)
// Compiled Size:	229 bytes (187 bytes gzipped)

x="http";kernel._getAbsolute=function(a,c,b){a.substr(0,7).toLowerCase()!=x+":/
/"&&a.substr(0,8).toLowerCase()!=x+"s://"&&(a=c.substr(0,c.lastIndexOf("/")+1)+
a);b=a;do a=b,b=a.replace(/[\w\.~]*\/\.\.\//,"");while(b!=a);return a};

// моя оптимизация
// Original Size:	450 bytes (296 bytes gzipped)
// Compiled Size:	153 bytes (147 bytes gzipped)

kernel._getAbsolute=function(a,c){/^https?:\/\//.test(a)||(a=c.replace(/[^\/]+$
/,"")+a);for(var b;b!=a;)b=a,a=a.replace(/[\w\.~]*\/\.\.\//,"");return a};

Еще одна функция:

kernel.Module.prototype._parse = function() {
    this._setState( this._states.parsing );

    var path = this.path;
    if ( path.charAt(0) == "/" ) {
        path = path.substr( 1, path.length - 1 );
    }

    this._script = document.createElement("script");
    this._script.type = "text/javascript";
    this._script.src = path;
    this._script.onload = function() {
        kernel._activeModule._finalizeParsing();
    }

    var me = this;
    this._invalidTimeout = setTimeout(
        function() {
            kernel._activeModule._invalidate( me.path );
        },
        kernel._invalidateTimeout
    );

    document.getElementsByTagName("head").item(0).appendChild(this._script);
}

// скомпилированный closure вариант
// Original Size:	592 bytes (321 bytes gzipped)
// Compiled Size:	509 bytes (292 bytes gzipped)

kernel.Module.prototype._parse=function(){this._setState(this._states.parsing);v
ar a=this.path;a.charAt(0)=="/"&&(a=a.substr(1,a.length-1));this._script=documen
t.createElement("script");this._script.type="text/javascript";this._script.src=a
;this._script.onload=function(){kernel._activeModule._finalizeParsing()};var b=t
his;this._invalidTimeout=setTimeout(function(){kernel._activeModule._invalidate(
b.path)},kernel._invalidateTimeout);document.getElementsByTagName("head").item(0
).appendChild(this._script)};

// ваша оптимизация
// Compiled Size:	333 bytes (241 bytes gzipped)

x="script";kernel.Module.prototype._parse=function(a,b){this.h(1);a=this.o;b=thi
s;a[0]=="/"&&(a=a.substr(1,a.length-1));this.w=document.createElement(x);this.w.
type="text/java"+x;this.w.src=a;this.w.onload=function(){e.c()};this.x=setTimeou
t(function(){e.b(b.o)},c);document.getElementsByTagName("head").item(0).appendCh
ild(this.w)};

// Насчет замены "script"
// было:
"script""text/javascript"
// cтало:
,x="script"x"text/java"+x
// вы ничего не выиграли и не проиграли, сколько было, столько и осталось

// Немного перепишем функцию

kernel.Module.prototype._parse = function() {
    var me = this;
    var script = me._script = document.createElement("script");

    script.type = "text/javascript";
    script.src = me.path.replace(/^\/(.*).$/, '$1');
    script.onload = function() {
        me._finalizeParsing();
    }

    me._setState( STATE_PARSING );

    me._invalidTimeout = setTimeout(
        function() {
            me._invalidate( me.path );
        },
        INVALIDATE_TIMEOUT
    );

    document.getElementsByTagName("head")[0].appendChild(script);
}

// получаем 
// Original Size:	453 bytes (304 bytes gzipped)
// Compiled Size:	371 bytes (278 bytes gzipped)

// А если проделать ваши замены
// Compiled Size:	283 bytes (223 bytes gzipped)

kernel.Module.prototype._parse=function(){var a=this,b=a.w=document.createElemen
t("script");b.type="text/javascript";b.src=a.o.replace(/^\/(.*).$/,"$1");b.onloa
d=function(){e.c()};a.h(1);a.x=setTimeout(function(){e.b(a.o)},c);document.getEl
ementsByTagName("head")[0].appendChild(b)};

Таким образом получили меньше вашего на 50 байт.
То есть ре-организовав код можно получить намного больший выигрыш, чем на выжимании байта другого на экономии var. Ваш код рефакторить и рефакторить.
Вывод: вы не то оптимизируете (по крайней мере в этих примерах), потратьте больше времени на рефакторинг (у вас там много лишнего).

Лучше всего на минимизацию влияет изолированность кода. Вы правильно начали оборачивать модуль в функцию и сливать свойства/методы в объекты, вместо поочередного их присвоения прототипу или объекту. Стоит так же завести еще функцию extend, которая помогла бы копировать свойства одного объекта в другой. Так же, все константы нужно вынести в отдельные переменные, вместо того чтобы хранить их свойствами объекта. Каркас вашего модуля должен быть примерно таким:

!function(){
  function extend(a, b){
    for (var key in b)
      a[key] = b[key];
  }

  var STATE_CREATED = 0;
  var STATE_PARSING = 1;
  // etc

  var Module = function(){};
  Module.prototype = {
    property: value,
    method: function(){
       this.setState(STATE_PARSING);
    }
    // ...
  };

  var _kernel = {
    Module: Module,
    property: value,
    method: function(){
    }
    // ...
  };
  extend(kernel, _kernel);
}()

В таком коде минификатор заменит константы на их значения и сократит имена переменных. Посмотрите как изменил этот пример google closure (код для читабельности пропущен через jsbeautifier)

(function () {
  var a = function () {};
  a.prototype = {
    property: value,
    method: function () {
      this.setState(1)
    }
  };
  (function (a, b) {
    for (var c in b) a[c] = b[c]
  })(kernel, {
    Module: a,
    property: value,
    method: function () {}
  })
})();

Можете еще разобраться с правилами написания кода для Advanced режима сборки, и получите дополнительную экономию.
Ваши оптимизации еще плохи тем, что они не автоматические.
И в целом: все выигрыши по объему обычно нивелируются при упаковке gzip. Код может быть меньше, но при этом хуже сжиматься gzip или сжатые gzip версии будут малоразличимы. Разница в 1-2-3 килобайта gzip версий несущественна, а сравнивать нужно именно эти версии.
Основной плюс от оптимизации объема не-gzip версии только в том, что такой код быстрее парсится и требует меньше памяти для хранения кода. Однако это существенно в основном только в случае когда его очень много и лишь для медленных мобильных браузеров.

Так что главный совет — пишите выразительный код, а оптимизации оставьте автоматическим средствам.

ЗЫ Сорри, что-то улекся писаниной :)

ну же, разработчики браузеров, даёшь байт-код в JS!

for(a;b;){c;d} -> for(a;b;c,d);
особенно после перевода if'ов в троичный оператор.

if(a){b,c} заменяем на if(a)b,c; — выигрываем 1 или 2 байта. Точнее, выигрываем 2 байта за счет фигурных скобок, и теряем один байт за счет финальной точки с запятой (или не теряем, если это в конце блока).

Из примера автора: if(typeof a==«string»){d=false;a=[a]} заменяем на if(typeof a==«string»)d=false,a=[a];

Не забываем про оператор in. При этом выигрываем несколько байт за счет того, что не нужно предварительно инициализировать переменную-индекс, и еще за счет того, что не нужно делать инкремент.

Из примера автора: l=0;for(;l<a.length;){j=a[l++];… заменяем на for(l in a)j=a[l],…

Меняем длинную и сложную конструкцию if(a)b;else c — на короткую и простую a?b:c. Выигрываем 8 байт.

Из примера автора:
if(this.j())this.d();else this.f()
->
this.j()?this.d():this.f()

Очень сомневаюсь, что это хоть как-то может уменьшить производительность, зато сокращение кода явно видно.

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

и все же если заменить некоторые совойства и методы
var l="length",p="push",s="state",m="module",...

this.u.push(a) -> this.u[p](a)

не думаю что это сильно замедлит конкретно ваш код, который тут рассматривается — ну максимум на 1мс!!! +-
а размер кода станет меньше с 3937 до 3808 только на приведенных заменах — гарантирую ))

if(this.y)this.y();
this.y&&this.y();
-2 байта )