Хорошие ресурсы для чрезвычайно минимизированного JavaScript (в стиле js1k) - PullRequest
10 голосов
/ 27 ноября 2010

Как я уверен, большинство JavaScripters знают, есть новый, js1k на рождественские темы.Я планирую ввести это время, но у меня нет опыта создания такого минимизированного кода.Кто-нибудь знает какие-нибудь хорошие ресурсы для такого рода вещей?

Ответы [ 7 ]

14 голосов
/ 27 ноября 2010

Google Closure Compiler - это хороший javascript minifier.

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


Редактировать: Добавлен неисчерпывающий список трюков, которые вы можете использовать для предельного минимизации JavaScript перед использованием минификатора:

Сокращение длинных имен переменных
Используйте сокращенные ссылки на встроенные переменные, такие как d=document;w=window.

Интервал установки
Функция setInterval может принимать либо функцию, либо строку. Передайте строку, чтобы уменьшить количество используемых символов: setInterval('a--;b++',10). Обратите внимание , что передача строки вызывает eval-вызов, поэтому он будет медленнее, чем передача функции.

Сокращение математических расчетов
Пример a=b+b+b может быть уменьшен до a=3*b.

Используйте научную запись
10000 может быть выражено в научной нотации как 1E4, экономя 2 байта.

Падение ведущих нулей
0.2 = .2 сохраняет байт

Тернери Оператор

if (a > b) {
     result = x;
}
else {
  result = y;
}

можно выразить как result=a>b?x:y

Брекеты
Скобки требуются только для блоков более чем одного оператора.

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

Сокращенное присвоение переменной
Вместо function x(){a=1,b=2;...}() передачи значений в функцию, function x(a,b){...}(1,2)

Думайте нестандартно
Не пытайтесь автоматически достичь стандартных способов ведения дел. Вместо использования d.getElementById('p') для получения ссылки на элемент DOM, вы можете использовать b.children[4], где d=document;b=body.


Оригинальный источник для вышеприведенного списка трюков:

http://thingsinjars.com/post/293/the-quest-for-extreme-javascript-minification/

4 голосов
/ 10 февраля 2012

Сполто прав.
Любой ограничитель кода не справится с задачей в одиночку.Вы должны сначала оптимизировать свой код, а затем сделать некоторые грязные ручные настройки.

В дополнение к списку приемов Сполто я хочу поощрять использование логических операторов вместо классического if else синтаксиса.пример:
Следующий код

if(condition){
    exp1;
}else{
    exp2;
}

несколько эквивалентен

condition&&exp1||exp2;  

Еще одна вещь, которую следует учитывать, может быть объявление нескольких переменных :

var a = 1;var b = 2;var c = 1;

можно переписать как:

var a=c=1,b=2;

Сполто также прав насчет скобок.Вы должны бросить их.Но кроме того, вы должны знать, что их можно отбросить даже для блоков большего количества выражений, написав выражения, разделенные запятой (конечно, с начальным ; ):

if(condition){
    exp1;
    exp2;
    exp3;
}else{
    exp4;
    exp5;
}

Может быть переписан как:

 if(condition)exp1,exp2,exp3;
 else exp4,exp5;

Хотя это не так много (он экономит вам только 1 символ / блок для тех, кто считает), это может пригодиться.(Кстати, последний Google Closure Compiler тоже справляется с этой задачей).

Еще один прием, заслуживающий упоминания, - это противоречивая функциональность with.
Если вам важнее размер, то вам следует использовать его, поскольку это может уменьшить размер кода.
Например, давайте рассмотрим этоМетод объекта:

object.method=function(){
    this.a=this.b;
    this.c++;
    this.d(this.e);
}

Это может быть переписано как:

object.method=function(){
    with(this){
        a=b;
        c++;
        d(e);
    }
}

, что в большинстве случаев значительно меньше.

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

a=function(){/*code here*/}; 
b=function(){/*code here*/};
c=function(){/*code here*/};
/*...*/
z=function(){/*code here*/};

В этом коде много "функций" повторяющихся ключевых слов.Что если бы вы могли заменить их одним (неиспользованным) символом, а затем оценить код?
Вот как я бы это сделал:

eval('a=F(){/*codehere*/};b=F(){/*codehere*/};c=F(){/*codehere*/};/*...*/z=F(){/*codehere*/};'.replace(/function/g,'F'));

Конечно, замененный токен может быть любым, посколькунаш код сводится к вычисляемой строке (например: мы могли бы заменить = function () { на F , что позволило бы сохранить еще больше символов).
Обратите внимание, что этот методдолжны использоваться с осторожностью, потому что вы можете легко испортить свой код с несколькими заменами текста;более того, вы должны использовать его только в тех случаях, когда это помогает (например, если у вас есть только 4 function токенов, замена их на меньший токен и последующая оценка кода могут фактически увеличитьдлина кода:

var a = "eval(''.replace(/function/g,'F'))".length,
    b = ('function'.length-'F'.length)*4;
alert("you should" + (a<b?"":" NOT") + " use this technique!");
3 голосов
/ 04 марта 2014

В следующей ссылке вы найдете удивительно хорошие приемы для минимизации кода js для этого конкурса:

http://www.claudiocc.com/javascript-golfing/

Один пример: (извлечено из раздела Операторы короткого замыкания ):

if (p) p=q;  // before
p=p&&q;      // after

if (!p) p=q; // before
p=p||q;      // after

Или более эссотерический Хэш-трюк контекста Canvas :

// before
a.beginPath
a.fillRect
a.lineTo
a.stroke
a.transform
a.arc                                  

// after
for(Z in a)a[Z[0]+(Z[6]||Z[2])]=a[Z];
a.ba
a.fc
a.ln
a.sr
a.to
a.ac

А вот еще одна ссылка на ресурс с удивительно хорошими трюками: https://github.com/jed/140bytes/wiki/Byte-saving-techniques

2 голосов
/ 10 мая 2013

Также:

Дин Эдвардс Пэкер http://dean.edwards.name/packer/

Uglify JS http://marijnhaverbeke.nl/uglifyjs

2 голосов
/ 27 ноября 2010

Прежде всего, простое добавление кода в минификатор не поможет вам. При написании кода нужно помнить об очень маленьком размере файла. Так что отчасти вам нужно научиться всем трюкам самостоятельно.

Кроме того, когда дело доходит до минифайеров, UglifyJS - это новая падающая звезда, ее мощность меньше, чем у GCC, и она намного быстрее. А поскольку он написан на чистом JavaScript, вам будет несложно узнать, какие уловки он применяет.

Но в конечном итоге все сводится к тому, сможете ли вы найти разумное, маленькое решение для чего-то удивительного.

1 голос
/ 10 мая 2013

Это единственная онлайн-версия сценария упаковщика @ cowboy :

http://iwantaneff.in/packer/

Очень удобно для упаковки / минирования JS

1 голос
/ 23 апреля 2011

Друг написал jscrush упаковщик для js1k.

Имейте в виду, чтобы максимально сохранить самоподобный код.

Мой рабочий процесс для экстремальной упаковки:закрытие (симпатичная печать) -> оптимизация рук, сходство функций, другое сходство кода -> закрытие (только пробелы) -> jscrush.

Это собирает около 25% данных.

Естьтакже packify , но я сам этого не проверял.

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