Google Closure Compiler с приложениями jQuery

Question

Я потратил много времени на jquery и на создание большого приложения. Недавно я просматривал Google Closure Library , но в настоящее время он не настолько элегантен, как jquery. Я полагаю, что у него может быть некоторый потенциал, и я буду больше его изучать, но сейчас я намерен продолжать использовать jQuery в качестве моей базовой инфраструктуры.

Однако я очень впечатлен Google Closure Compiler . Я хотел бы начать использовать его в процессе сборки моего приложения. К сожалению, не совсем ясно, насколько легко будет использовать его для проектов, которые не соответствуют стандартным стандартам Google Closure.

Существуют ли передовые практики или полезные ресурсы для разработки проектов на основе jquery и использования компилятора Google Closure? Например:

1. Имеет ли смысл скомпилировать jquery и jquery-ui с ним, или я должен продолжать указывать на эти ресурсы в Google CDN? Я уверен, что мои jquery и jquery-ui будут меньше, поскольку я не использую все возможности библиотек, но указание на CDN увеличивает шансы того, что файл уже будет в кеше посетителя.

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

3. В настоящее время мой проект имеет Java-бэкэнд и построен с использованием Maven. Имеет ли смысл добавлять компилятор Google Closure к этому процессу сборки?

По сути, я ищу любые полезные ресурсы, которые относятся к использованию Google Closure Compiler с jQuery.

Answer 1

$(elem)['width']() вместо $(elem).width()

Это работает с ADVANCED_OPTIMIZATIONS, поэтому компилятор закрытия не реорганизует методы jQuery.

Answer 2

Компилятор Google Closure является jQuery или любой другой библиотечной независимой. Он имеет два типа оптимизации -

• Simple
• Advanced

Я пытался применить расширенную оптимизацию, но это сильно сломало мое приложение. Если он делает то же самое, вы можете попытаться исправить ваше приложение или использовать простую оптимизацию. При простой оптимизации размер уменьшился на 32%, а при расширенной оптимизации - около 68%, но в любом случае это не сработало.

Перемещение конкатенации JS в автоматическом режиме в ваш процесс сборки, безусловно, является подходящим способом. См. Управление зависимостями JavaScript .

jQuery уже сильно оптимизирован для размера в байтах, поэтому я сомневаюсь, что вы сможете выжать достаточно сока с помощью Google Closure Compiler, но стоит попробовать в сочетании с вашим проектом.

Я вижу библиотеку Google Closure в хорошем свете, но пока не пользуюсь ею, так как на данный момент я сильно инвестировал в MooTools. Глядя на его API , кажется, что он имеет довольно широкий охват того, что он может предложить, кроме простых манипуляций DOM, обработки AJAX, обработки событий и т. Д.

Answer 3

Я считаю, что начиная с 1.4.2 (возможно, раньше) jQuery по умолчанию минимизируется с помощью Google Closure Compiler. Поэтому, вероятно, лучше продолжать ссылаться на пользовательский интерфейс jQuery / jQuery через Google CDN. Тем не менее, есть все еще преимущества интеграции компилятора Closure в ваш процесс сборки для объединения и минимизации ваших файлов JS. А именно, уменьшенные запросы JS на загрузку страницы и меньшие объемы данных передаются в надежде улучшить производительность загрузки на стороне клиента. Вот некоторые из проблем, с которыми мы столкнулись при интеграции компилятора Closure в наш процесс сборки:

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

2. Управление зависимостями - Компилятор Closure действительно имеет возможность автоматически сортировать порядок объединенного JS так, что зависимости сохраняются. Чтобы использовать эту функцию, файлы JS должны быть помечены goog.provide\goog.require, чтобы сообщить компилятору, каковы зависимости ( - manage_closure_dependencies ). Компилятор также исключит любой JS, который не требуется (т. Е. На него не ссылаются оператором goog.require), из объединенного JS. Вот несколько вещей, на которые стоит обратить внимание:

   • Если вы хотите включить все ваши JS-файлы в комбинированный вывод, убедитесь, что вы включили в сборку «манифестный» JS-файл, который содержит только goog.require операторов для каждого файла, который будет включен в комбинированный сценарий (т.е. нет goog.provide заявления).
   • Если вы не используете библиотеку Closure, убедитесь, что вы компилируете, используя SIMPLE_OPTIMIZATIONS или выше. В противном случае компилятор не удалит операторы goog.provide/goog.require. Кроме того, вы можете также определить свои собственные goog.provide/goog.require JS-функции, чтобы избежать ошибок.
   • Убедитесь, что нет циклических зависимостей, или столкнитесь с последствиями.

3. Компиляция отладочной версии комбинированного скрипта - При необходимости вы можете скомпилировать отладочную версию комбинированного скрипта, используя флаг --formatting PRETTY_PRINT. Это выведет эквивалентный сценарий, отформатированный с пробелами без изменений для разработки / отладки.

Хотя документация по компилятору Closure иногда может быть разрозненной, ее по большей части достаточно для начала работы и она постоянно совершенствуется - поэтому регулярно проверяйте наличие обновлений, а не только SO;)

Надеюсь, это поможет.

Answer 4

Использование jQuery с расширенным режимом компилятора замыканий

Answer 5

jQuery не совместим (пока) с компилятором Closure в расширенном режиме. Я согласен, что было бы очень хорошо сделать его совместимым, потому что его синтаксис цепочки методов очень легко позволяет виртуализировать прототипы для значительно улучшенной скорости выполнения.

Фактически, из популярных библиотек JavaScript (кроме Closure Library, то есть) только Dojo Toolkit совместим с режимом Closure Advanced.

http://dojo -toolkit.33424.n3.nabble.com / файл / n2636749 / Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf? По-пользователя = т

Answer 6

Мне было сложно заставить jQuery работать с компилятором / продвинутым замыкателем, но, поскольку вы работаете с несколькими файлами, я думаю, что вам важно посмотреть на вариант модулей здесь:

Использование параметра --module в Closure Compiler для создания нескольких выходных файлов

Я копался в поисках хорошей документации в Интернете, но ОЧЕНЬ ОЧЕНЬ мало.Используя один JQuery Extern, я смог скомпилировать с расширенным штрафа - с несколькими файлами и т. Д.

@echo off
java -jar bin\compiler.jar ^
    --compilation_level=ADVANCED_OPTIMIZATIONS ^
    --externs "externs\jquery-1.8.js" ^
    --language_in=ECMASCRIPT5_STRICT ^
    --warning_level=VERBOSE ^
    --module_output_path_prefix .\compiled\ ^
    ^
    --module_wrapper core:"(function(){%%s%%})();" ^
    --js ".\corelib.js" ^
    --module core:1 ^
    ^
    --module_wrapper somescript"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript:1:core ^
    ^
    --module_wrapper somescript1:"(function(){%%s%%})();" ^
    --js ".\some_other_runtime_loaded_script" ^
    --module somescript1:1:core

описания

--module_wrapper name:wrapper

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

--module name:#:dependency

name       Name of the script that will get written
#          number of scripts above that line to include into this script
dependency What script does this depend on?

Answer 7

Таурен, вы можете проверить свой код, используя closure-compiler home.Вы можете импортировать свою библиотеку JQuery или что-то еще и попробовать это.Если возможно, определите свой код JavaScript с помощью анонимной функции, которая позволяет избежать конфликта имен.Используйте пространства имен с помощью библиотеки Google , обеспечивающей функцию.Еще один полезный ресурс, который может вам помочь, - Руководство по стилю Google JavaScript

Answer 8

Вы можете использовать kjscompiler: https://github.com/knyga/kjscompiler и указать любые библиотеки, которые вам нравятся, как внешние.Они не будут минимизированы.Действительно хорошее решение.