Javascript.RU

Введение

Google Closure Compiler - уникальный инструмент, разработанный Google для сжатия и обфускации собственного javascript.

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

Вместе с этим, инструмент это достаточно сложный. Основные его фичи скрываются в продвинутом режиме сжатия, для применения которого нужны соответствующие навыки и стиль программирования.

Google Closure Compiler написан на языке Java, причем так, что его достаточно просто расширить - конечно, если вам знакомы понятия компилятора, синтаксического дерева и понятен Java.

Официальная документация находится на http://code.google.com/intl/ru/closure/compiler/docs/overview.html.

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

В этом введении мы разберем основные опции компилятора и осуществим компиляцию простых примеров.

Существует 3 способа запуска компилятора:

  1. Через веб-интерфейс. То есть, зайти на страничку, ввести или загрузить код и скомпилировать его с нужными опциями. Результат появится в текстовом поле.

    Этот способ удобен, чтобы поиграться с оптимизациями, понять от чего чего бывает, не более.

    Документация по этому способу: http://code.google.com/intl/ru/closure/compiler/docs/gettingstarted_ui.html.

  2. Через веб-сервис. Этот способ подразумевает отправку POST-запроса на адрес http://closure-compiler.appspot.com/compile. В параметрах запроса описаны флаги компиляции и передан код.
    Ответом будет сжатый javascript, либо ошибки компиляции.
    Этот способ удобен тем, что на веб-сервис google выкладывает, как правило, последнее стабильное API. Это убирает необходимость в хранении и обновлении компилятора.
    Документация по этому способу находится на http://code.google.com/intl/ru/closure/compiler/docs/gettingstarted_ui.html.
  3. Через приложение. Google Closure Compiler является приложением, написанным на языке java, и распространяется как в виде jar-файла, так и в виде исходных кодов SVN: http://closure-compiler.googlecode.com/svn.

    Этот способ - самый гибкий. Он не только не требует наличия интернет,
    но и допускает использование собственной сборки компилятора, которая использует внутренние опции, недоступные для флагов.

Сделаем небольшое упражнение по сжатию javascript-файла при помощи приложения Google Closure Compiler.
Для него вам понадобится Java Runtime Environment версии 6.

Этот пример содержит основные шаги для сжатия с использованием Google Closure Compiler.

  1. Создайте директорию с названием closure-compiler.
    Скачайте файл компилятора compiler.jar и сохраните его в директории closure-compiler.
  2. Создайте javascript-файл hello.js:
    /* простая функция */
    function hello(longName) {
        alert('Hello, ' + longName);
    }
    hello('New User');
    

    Сохраните его в директории closure-compiler.

  3. Скомпилируйте javascript-файл. Для этого запустите из директории closure-compiler следующую команду:

    java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
    

    Она сгенерирует новый файл hello-compiled.js, который содержит следующий код:

    function hello(a){alert("Hello, "+a)}hello("New User");
    

    Заметьте, что компилятор удалил комментарии, пробелы и лишнюю точку с запятой. Кроме того, он заменил параметр longName на более короткое имя a. В результате получили намного меньший javascript-файл.

    Чтобы убедиться, что получившийся файл работает корректно, подключите hello-compiled.js в HTML наподобие следующего:

    <html>
      <head><title>Hello World</title></head>
       <body>
         <script src="hello-compiled.js"></script>
      </body>
    </html>
    

    Загрузите этот HTML-файл в браузер и вы должны увидеть дружеский привет!

Полный список флагов будет выведен при запуске:

java -jar compiler.jar --help

Он довольно длинный и, поначалу, большинство опций будут непонятны.
В этом разделе мы разберем самые основные опции сжатия, которые позволят сразу же делать основные операции по оптимизации javascript.

--js
Входной javascript-файл. Этот флаг может повторяться много раз с разными файлами:

--js script1.js --js script2.js ...

В результате получится объединенный сжатый файл.

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

--js_output_file
Имя файла для результата сжатия. По умолчанию: выводит в стандартный поток вывода.
--check_types
Включает проверку типов компилятором. По умолчанию - выключена. В любом случае, компилятор проверит синтаксическую правильность кода и выдаст ошибку в случае лишних скобок, незакрытых комментариев и т.п.

Более подробно о проверке типов вы можете прочитать в статье Объявление и проверка типов в примерах

--compilation_level
Уровень оптимизации, один из: WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, ADVANCED_OPTIMIZATIONS. По умолчанию: SIMPLE_OPTIMIZATIONS.
Этот уровень подразумевает безопасные оптимизации и работает сходным образом с ShrinkSafe и YUI Compressor.
WHITESPACE_ONLY - простейший уровень для вырезания комментариев, пробелов и проверки кода на корректность.

Основные оптимизации раскрыты в статьях Оптимизации стандартного режима и Продвинутые оптимизации.

--formatting
Определяет форматирование выходного файла. Для печати сжатого файла в более-менее понятном виде, с форматированием и отступами, используйте значение --formatting PRETTY_PRINT.

Чтобы ответить на этот вопрос, необходимо перечислить основные способы сжатия javascript. Их всего несколько:

  1. Удаление комментариев, лишних пробелов и прочего мусора через регулярные выражения.
    Этот способ использовался в первых компрессорах, таких как JSMin и packer. Позволяет сжать код за счет очистки от заведомо лишних вещей.
  2. Архивация типа недо-gzip.
    Из обычного файла можно сделать исполняемый самораспаковывающийся архив. Аналогично можно поступить с javascript. На этом основан известный упаковщик packer от Dean Edwards. При использовании этого способа код сжимается простеньким алгоритмом компрессии (сжатие со словарем), а то что получится - оборачивается в разархивирующий eval.

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

    Кроме того, на браузер ложится дополнительная нагрузка по разархивации полученного javascript.

  3. Сжатие, основанное на структуре кода и сокращении символов.
    Этот способ - самый последний. Его используют компрессоры ShrinkSafe, YUI Compressor и Google Closure Compiler.

    При сжатии этим методом оптимизатор сначала читает javascript в синтаксическое дерево. Затем он проходит по полученному дереву, заменяет локальные переменные на более короткие и производит оптимизации. Потом по оптимизированному дереву оптимизатор генерирует код, уже с оптимизациями.

    Этот способ заведомо превосходит и делает ненужным первый, т.к. знание о структуре кода, получаемое из синтаксического дерева - более правильное и полное, чем из регэкспов.

Google Closure Compiler, как и другие оптимизаторы последнего поколения, не использует регекспов и не производит архивацию (да, с этим прекрасно справляется серверный gzip).

В чем же отличия Google Closure Compiler от других аналогичных оптимизаторов, таких как ShrinkSafe и YUI Compressor?

Отличие кроется в подходе к оптимизации.

В то время как YUI Compressor использует локальные оптимизации, то Google Closure Compiler использует комплексный анализ кода.

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

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

YUI Compressor работает безопаснее и стабильнее для некоторых видов синтаксических конструкций (eval/with/CC, см. подробнее в статье Оптимизации стандартного режима), но если понимать, что происходит, то и Google Closure Compiler может быть не менее безопасен.

На момент написания статьи, Google не опубликовала утилит для сжатия CSS, а вот YUI Compressor это умеет. Так что выбрасывать его пока рановато.
Но вот для сжатия javascript лучше Google Closure Compiler найти что-либо сложно. Во всяком случае, в открытом доступе

Для сборки компилятора подойдет практически любая ОС, т.к. используются только кросс-платформенные инструменты.

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

svn co http://closure-compiler.googlecode.com/svn/trunk compiler

Последняя версия компилятора будет сохранена в директорию compiler.

Чтобы собрать компилятор, вам понадобится JDK версии 6 и установленный ANT.

Установка ANT довольно проста и описана в статье Installing Ant.

Для запуска достаточно запустить ant в директории с файлом сборки build.xml. После этого готовый к использованию jar-файл будет лежать в директории build.

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


Автор: Гость (не зарегистрирован), дата: 11 декабря, 2009 - 09:17
#permalink

Есть ли прога для компиляции js файлов, а то неудобно через командную строку


Автор: Tim, дата: 1 апреля, 2012 - 14:01
#permalink

Не что не мешает написать bat'ник. Вот мой:

:: ищем js-сценарии в папке source
FOR /R %%i IN (source/*.js) DO (

:: скармливаем их компилятору
java -jar compiler.jar ^
--js source/%%~ni%%~xi ^
--js_output_file compiled/%%~ni-min.js ^
--compilation_level SIMPLE_OPTIMIZATIONS ^
--formatting PRETTY_PRINT
)

Результат сохраняется в папку compiled


Автор: Гость (не зарегистрирован), дата: 15 июля, 2013 - 17:45
#permalink

Использую WebStorm
вызываем Настройки (ctrl+alt+s)
далее "File Watchers" справа жмем плюс и выбираем closure compiler
Нужно только указать путь до батника и минимум настроек (webStorm по дефолту знаком с Google Closure, sass, YuI - поэтому настраивать почти ничего не нужно)


Автор: Евгений Сергеевич (не зарегистрирован), дата: 21 мая, 2010 - 12:13
#permalink

Очень интересует, разумно ли его применять динамически, прямо на сервере? Раньше я использовал jsmin и минимизировал нагрузку на сервер с помощью кэширования на стороне сервера (если есть кэшированный файл с подходщим контентом, то отдаем его; если нет, генерируем динамически вывод, чистим jsmin'ом, сжимаем, отдаем и попутно создаем файл кэша) - такая тактика хорошо себя показала. Сразу поясню: такие извращения нужны для удобства разработки - в ручную жать 30-40 файлов тяжело.


Автор: Анонимус (не зарегистрирован), дата: 4 октября, 2014 - 07:35
#permalink

30-40 файлов??? Что за фигня - если это на одну страницу - то клейте их не задумываясь. Если на разные, то кто Вам мешает написать sh или bat для автоматизации.


Автор: GreatRash, дата: 30 августа, 2010 - 11:47
#permalink

Т.е. для сжатия нужна установленная Java-машина, я правильно понимаю? Нет ли у них онлайн сервиса?


Автор: maxbarbul, дата: 13 сентября, 2010 - 17:39
#permalink

2 GreatRash:
On-line compiler:
http://closure-compiler.appspot.com/home
Описание (очень краткое):
http://code.google.com/intl/ru/closure/compiler/docs/gettingstarted_ui.h...

Также можно читать здесь: http://code.google.com/intl/ru/closure/compiler/


Автор: Zenitchik, дата: 14 июля, 2013 - 14:14
#permalink

Можете мне, нубу в Java, пошагово объяснить, как собрать компилятор?

Я чекаутнул с помощью черепашки исходники, с указанного адреса.
Поставил ant
Запустил ant в контексте директории, в которой лежит build.bat - а он мне

Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre7\li
b\tools.jar
Buildfile: c:\GCC\build.xml

rhino:

properties:

init:

compile:

compile-most:

BUILD FAILED
c:\GCC\build.xml:99: The following error occurred while executing this line:
c:\GCC\lib\rhino\build.xml:45: The following error occurred while executing this
line:
c:\GCC\lib\rhino\src\build.xml:38: Unable to find a javac compiler;
com.sun.tools.javac.Main is not on the classpath.
Perhaps JAVA_HOME does not point to the JDK.
It is currently set to "C:\Program Files\Java\jre7"

Total time: 0 seconds

Что я не так делаю?


Автор: Гость (не зарегистрирован), дата: 6 февраля, 2014 - 14:05
#permalink

Недостаточно иметь JRE, для компиляции надо скачать и установить JDK. Судя по сообщениям, у тебя только JRE установлен.


Автор: JSman-Ru (не зарегистрирован), дата: 13 апреля, 2014 - 22:54
#permalink

Вот у меня стоит задача удаления dead code из jscript при этом не переименовывать переменные, объекты, функции и т.п. Как можно его заставить сделать "простую оптимизацию", но без переименования? Заранее благодарен.


Автор: limarandrew, дата: 1 июля, 2019 - 18:18
#permalink

в точности с "Zenitchik", в Java, непонимаю ничего, с трудом перевариваю джи-ес, но вот то что ссылки битые, то видно всем, ведь инфа старая. Просьба, удалтите старые-битые ссылки! этот синий цвет очень глаза режет... А вообще заинтересовался данной серией статей о компиляторе так как столкнулся с подобным на лён-джи-ес.


Автор: Лучшее (не зарегистрирован), дата: 11 апреля, 2020 - 18:17
#permalink

Первый случай, когда documentFragment применим - это возврат множества узлов из функции. Можно это сделать возвращением массива, а можно вернуть documentFragment: run 3


Автор: комментарий (не зарегистрирован), дата: 11 апреля, 2020 - 18:18
#permalink

Можете мне, нубу в Java, пошагово объяснить, как собрать компилятор?

Я чекаутнул с помощью черепашки исходники, с указанного адреса.
Поставил ant
Запустил ant в контексте директории, в которой лежит build.bat - а он мне

Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre7\li
b\tools.jar super mario bros
Buildfile: c:\GCC\build.xml

rhino:

properties:

init:

compile:

compile-most:

BUILD FAILED
c:\GCC\build.xml:99: The following error occurred while executing this line:
c:\GCC\lib\rhino\build.xml:45: The following error occurred while executing this
line:
c:\GCC\lib\rhino\src\build.xml:38: Unable to find a javac compiler;
com.sun.tools.javac.Main is not on the classpath.
Perhaps JAVA_HOME does not point to the JDK.
It is currently set to "C:\Program Files\Java\jre7"

Total time: 0 seconds

Что я не так делаю?


Автор: Tony Peterson (не зарегистрирован), дата: 4 июля, 2022 - 06:45
#permalink

I can't tell you how much I appreciate your website. You most certainly own some incredibly insightful and entertaining anecdotes. word hurdle


Автор: lol beans (не зарегистрирован), дата: 7 июля, 2022 - 06:10
#permalink

This is an excellent article. This is, in my opinion, one of the best posts ever written. Your work is excellent and inspiring. Thank you for posting this article. I act as a test user of game sites to check the safety of those game sites, I noticed a game that is being played a lot by students and is quite safe for everyone. Lol beans is a fun game with adorable and emotional snakes. It is a popular game that attracts people of all genders and ages.


Автор: natasha evans (не зарегистрирован), дата: 29 июля, 2022 - 10:13
#permalink

Thank you for providing this information. I am delighted to come on this fantastic article. Waffle game online


Автор: pandahp (не зарегистрирован), дата: 14 октября, 2022 - 05:48
#permalink

Thank you for sharing this article with everyone. I will follow your instructions to apply for my job. wordle unlimited - nyt wordle


Автор: maimai (не зарегистрирован), дата: 14 октября, 2022 - 05:52
#permalink

The information you share is perfect, I think. There are many articles similar to this on the internet but this is probably the one that I like the most. wordle nyt - wordle


Автор: Гость (не зарегистрирован), дата: 1 декабря, 2022 - 04:59
#permalink

What you share is great and useful to the community, with lots of useful information. Please continue to update. thanks! fnf


Автор: quordle (не зарегистрирован), дата: 29 декабря, 2022 - 13:56
#permalink

Since this is my first time using the forum, there are likely many things that I You have creative hands and minds of great food, really the recipes you share I feel very delicious and beautiful, thank you for sharing these great recipes. am unaware of at this point. I'm expecting to pick up some pointers from the forums, and I'm looking forward to getting to know everyone else that frequents this place. quordle


Автор: 온라인카지노 (не зарегистрирован), дата: 30 декабря, 2022 - 07:02
#permalink

I was looking for another article by chance and found your article 온라인카지노 I am writing on this topic, so I think it will help a lot. I leave my blog address below. Please visit once.


Автор: 바카라사이트추천 (не зарегистрирован), дата: 2 января, 2023 - 05:57
#permalink

Hello ! I am the one who writes posts on these topics 바카라사이트추천 I would like to write an article based on your article. When can I ask for a review?


Автор: Гость (не зарегистрирован), дата: 4 апреля, 2023 - 11:54
#permalink

Hi guys! Open to welcoming the first customers in papa's burgeria shop.


Автор: JellyMin, дата: 10 мая, 2023 - 16:28
#permalink

Google Closure Compiler is written in Java, and in such a way that it is quite easy to extend it - of course, if you are familiar with the concepts of a compiler, a syntax tree, and Java is understandable. bathroom contractor


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 16 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum