Как сжать js-файл ручками
Завершил один проект, большой он-лайн каталог автомасел. Программировал на JavaScript (jQuery), получился файл размером 393825 байта. Реально многовато.
Пробовал скормить его стандартным сжимальщикам вроде такого, но тогда скрипт перестаёт работать.
Итак, надо сжимать самому.
Далее описываю этот процесс пошагово. Код правил в программе Notepad++.Сразу отмечу, результат вполне хорош.
Изначально код выглядел так:
/* ============================= FERRARI ================================ */
/* Выбираем модель Ferrari */
$("#form2_Ferrari_select").change(function(){
$("#answer").hide();
var a = $("#form2_Ferrari_select option:selected").val();
if (a == "348") {var b = $("#form3_Ferrari_348");}
if (a == "456") {var b = $("#form3_Ferrari_456");}
if (a == "512") {var b = $("#form3_Ferrari_512");}
if (a == "550") {var b = $("#form3_Ferrari_550");}
if (a == "F") {var b = $("#form3_Ferrari_F");}
if (a == "Testarossa") {var b = $("#form3_Ferrari_Testarossa");}
$("#form3").find(".selector").children(b).unwrap();$(b).siblings().hide();$(b).show();$(b).uniform();
$("#form3 children select option:first").attr("selected","1");
});
/* === Выбираем двигатель и год производства Ferrari === */
$("#form3_Ferrari_348").change(function(){ $("#answer").show();$("#answer").children(".answer_item").hide();$("#answer18,#answer19,#answer20,#answer21,#answer22,#answer6,#answer7,#answer9,#answer10").show();
});
$("#form3_Ferrari_456").change(function(){ $("#answer").show();$("#answer").children(".answer_item").hide();$("#answer18,#answer19,#answer20,#answer21,#answer22,#answer6,#answer7,#answer9,#answer10").show();
});
Как видно, код снабжён комментариями, пробелами. Сущности имеют логичные имена.
Шаг 1.
В первую очередь, заменяем имена сущностей переменными. Для одной сущности всё просто:
var a1 = «#answer»
Для тех сущностей, которые перечислены в скобках через запятую, такой подход не сработает ($(a2,a3,a4).show() работать просто не будет), поэтому в переменные запихиваем целые выражения. Например:
var a2 = «#answer1,#answer3,#answer20,#answer29″
и так далее. В моём проекте всего получилось 26 различных выражений под скобками.
Первый шаг даёт самый большой выигрыш: 393825 => 271471
Шаг 2.
Удаляем комментарии. В сжатой версии они ни к чему. Результат: 271471 => 254914
Шаг 3.
Удаляем пустые строки, которые разделяли куски кода в полной версии. Результат скромный, но всё же: 254914 => 253152
Шаг 4.
Убираем отступы — они нам тоже больше ни к чему. Для этого выделяем весь код (Ctrl+A) и несколько раз нажимаем Shift+Tab или Правка — Отступы — Удалить табуляцию.
В итоге неплохо: 253152 => 233143
Шаг 5.
Удаляем пробелы в конце строк: Правка — Убрать пробелы с концов строк. Тоже неплохо: 233143 => 223372
Шаг 6.
Добиваем пробелы, оставшиеся в теле кода. Находим выражения вроде таких — a == 6, else { и так далее — и заменяем их на такие же, но без пробелов (Ctrl+F — Заменить). Результат: 223372 => 214032
Общий итог весьма неплох: 393825 => 214032, или сжатие на 46%.