it-swarm.com.ru

Как вы автоматизируете минимизацию Javascript для своих веб-приложений Java?

Мне интересно услышать, как вы предпочитаете автоматизировать минимизацию Javascript для своих веб-приложений Java. Вот несколько аспектов, которые меня особенно интересуют:

  • Как это интегрировать? Является ли это частью вашего инструмента сборки, фильтра сервлета, отдельной программы пост-обработки файла WAR или чего-то еще?
  • Это легко включить и отключить? Очень несправедливо пытаться отлаживать минимизированный скрипт, но также полезно для разработчика иметь возможность проверить, что минификация ничего не нарушает.
  • Работает ли это прозрачно, или имеет какие-либо побочные эффекты (кроме тех, которые присущи минификации), которые я должен учитывать в своей повседневной работе?
  • Какой минификатор он использует?
  • Это без каких-либо особенностей что вы можете придумать?
  • Что вам нравится в нем?
  • Что вам не нравится ?

Это в основном послужит справочным материалом для моих будущих проектов (и, надеюсь, другие SOer тоже найдут его информативным), поэтому все виды инструментов интересны.

(Обратите внимание, что это не вопрос о том, какой минификатор лучше. У нас их уже много.)

120
gustafc
64
gustafc

Мы используем задачу Ant для минимизации js-файлов с помощью YUICompressor во время производственной сборки и помещаем результат в отдельную папку. Затем мы загружаем эти файлы на веб-сервер. Вы можете найти несколько хороших примеров для интеграции YUI + Ant в этом блоге .

Вот пример:

<target name="js.minify" depends="js.preprocess">
    <apply executable="Java" parallel="false">
        <fileset dir="." includes="foo.js, bar.js"/>
        <arg line="-jar"/>
        <arg path="yuicompressor.jar"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="*-min.js"/>
        <targetfile/>
    </apply>
</target>
13
serg

Я думаю, что один из лучших и правильных инструментов для этой работы - wro4j Проверить https://github.com/wro4j/wro4j

Делает все что нужно:

  • Держите веб-ресурсы проекта (JS & CSS) хорошо организованными
  • Объединяйте и уменьшайте их во время выполнения (используя простой фильтр) или во время сборки (используя плагин maven)
  • Бесплатный и открытый исходный код: выпущен под лицензией Apache 2.0
  • wro4j поддерживает несколько инструментов минимизации: JsMin, компрессор Google Closure, YUI и т. д.
  • Очень прост в использовании. Поддержка фильтра сервлетов, простой Java или весенней конфигурации
  • Поддержка Javascript и мета-рамок CSS: CoffeeScript, Less, Sass и т.д.
  • Проверка: JSLint, CSSLint и т.д.

Может работать как в режиме отладки, так и в режиме производства. Просто укажите все файлы, которые он должен обработать/предварительно обработать, и он сделает все остальное.

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

<script type="text/javascript" src="wro/all.js"></script>
12
SZ Quadri

Я написал макросы ant для компилятора Google Closure и компрессора Yahoo и включил этот файл в различные веб-проекты.

<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">

  <property name="gc" value="compiler-r1592.jar" />
  <property name="yc" value="yuicompressor-2.4.6.jar" />

  <!-- Compress single js with Google Closure compiler -->
  <macrodef name="gc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <Java jar="${gc}" fork="true">
        <!--
        - - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
        Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
        - - warning_level QUIET | DEFAULT | VERBOSE
        Specifies the warning level to use.
        -->
        <arg line="[email protected]{dir}/@{src}.js" />
        <arg line="[email protected]{dir}/@{src}-min-gc.js" />
      </Java>
    </sequential>
  </macrodef>

  <!-- Compress single js with Yahoo compressor -->
  <macrodef name="yc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <Java jar="${yc}" fork="true">
        <arg value="@{dir}/@{src}.js" />
        <arg line="-o" />
        <arg value="@{dir}/@{src}-min-yc.js" />
      </Java>
    </sequential>
  </macrodef>

  <!-- Compress all js in directory with Yahoo compressor -->
  <macrodef name="yc-js-all">
    <attribute name="dir" />
    <sequential>
      <apply executable="Java" parallel="false">
        <fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>

  <!-- Compress all css in directory with Yahoo compressor -->
  <macrodef name="yc-css-all">
    <attribute name="dir" default="${build.css.dir}" />
    <sequential>
      <apply executable="Java" parallel="false">
        <fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <arg line="-v --line-break 0" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>
</project>
  • Интеграция: <import file="build-minifier.xml" /> в вашем build.xml, затем вызовите как обычно муравьиные задачи: <gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />

  • Выбор из двух минификаторов: компилятор Google Closure и компрессор Yahoo, вы должны загрузить их вручную и поместить рядом с xml-файлом

  • Минифайеры пропускают уже сжатые файлы (оканчивающиеся на -min*)

  • Обычно я делаю три версии сценария: несжатый (например, prototype.js) для отладки, сжатый компилятором закрытия (prototype-min-gc.js) для рабочего сервера, сжатый с помощью Yahoo (prototype-min-yc.js) для устранения неполадок, потому что компилятор закрытия использует рискованные оптимизации и иногда создает недопустимый сжатый файл и компрессор Yahoo более безопасно

  • Компрессор Yahoo может минимизировать все файлы в директории одним макросом, компилятор Closure не может

8
Victor

Я попробовал два способа:

  1. используя фильтр сервлетов. В рабочем режиме фильтр активируется, и он сжимает все данные, связанные с URL, например * .css или * .js.
  2. используя maven и yuicompressor-maven-plugin ; сжатие выполняется una-tantum, (при сборке производственной войны )

Конечно, последнее решение лучше, поскольку оно не потребляет ресурсы во время выполнения (мое веб-приложение использует движок приложения Google) и не усложняет код приложения. Итак, предположим этот последний случай в следующих ответах:

Как это интегрировать? Является ли это частью вашего инструмента сборки, фильтра сервлетов, отдельной программы пост-обработки файла WAR или чего-то еще?

используя Maven

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

вы активируете его только при сборке финальной войны; в режиме разработки вы видите несжатую версию ваших ресурсов

Работает ли он прозрачно или имеет какие-либо побочные эффекты (помимо тех, которые присущи минификации), которые я должен учитывать в своей повседневной работе?

абсолютно

Какой минификатор он использует?

YUI компрессор

У него нет каких-либо особенностей, о которых вы можете подумать?

нет, он очень полный и простой в использовании

Что вам нравится в нем?

он интегрирован с моим любимым инструментом (maven), а плагин находится в центральном хранилище (хороший гражданин maven)

7
dfa

Я думаю, что вам нужна библиотека сжатия, например, тег Granule.

http://code.google.com/p/granule/

Он gzip и объединяет javascripts, обернутый тегом g: compress различными способами, также имеет задачу Ant

пример кода:

 <g: compress> 
 <script type = "text/javascript" src = "common.js" />
 <script type = "text/javascript" src = " closure/goog/base.js "/>
 <script> 
 goog.require ('goog.dom'); 
 goog.require ('goog.date'); 
 goog.require ('goog.ui.DatePicker'); 
 </ script> 
 <script type = "text/javascript"> 
 var dp = new goog.ui.DatePicker (); 
 dp.render (document.getElementById ('datepicker')); 
 </ script> 
 </ g: compress> 
 ... 
 
4
Andy Bell

Я действительно удивлен, что никто не упомянул JAWR - https://j-a-w-r.github.io

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

Как это интегрировать? Является ли это частью вашего инструмента сборки, фильтра сервлетов, отдельной программы пост-обработки файла WAR или чего-то еще?

Первоначально он выполнял обработку/тяжелую работу при запуске приложения, и обслуживание было основано на сервлет . Начиная с 3.x добавлена ​​поддержка интеграция во время сборки .

Поддержка JSP и Facelets предоставляется через пользовательскую библиотеку тегов JSP для импорта обработанных ресурсов. Кроме того, реализован загрузчик ресурсов JS, который поддерживает загрузка ресурсов со статических HTML-страниц .

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

Опция debug=on доступна для использования перед запуском приложения, а пользовательский параметр GET может быть задан в отдельных производственных запросах, чтобы выборочно переключать режим отладки во время выполнения для указанного запроса.

Какой минификатор он использует?

Для JS он поддерживает YUI Compressor и JSMin, для CSS я не уверен.

У него нет каких-либо особенностей, о которых вы можете подумать?

Поддержка SASS приходит на ум. Тем не менее, он поддерживает LESS.

3
Amr Mostafa

Наш проект справился с этим несколькими способами, но мы продолжали использовать YUI Compressor через наши разные итерации.

Первоначально у нас был сервлет, обрабатывающий сжатие для JavaScript при первом обращении к конкретному файлу; это было тогда кешировано. У нас уже была система для обработки пользовательских файлов свойств, поэтому мы просто обновили наши файлы конфигурации для поддержки включения или выключения компрессора в зависимости от среды, в которой мы работали.

Теперь среды разработки никогда не используют сжатый JavaScript для отладки. Вместо этого мы обрабатываем сжатие в процессе сборки при экспорте нашего приложения в файл WAR.

Наш клиент никогда не беспокоился о сжатии, и разработчики не замечают этого, пока не решат отладить JavaScript. Так что я бы сказал, что это довольно прозрачно с минимальными, если таковые имеются, побочными эффектами.

2
doomspork

Это сработало для меня: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">

    <taskdef name="yuicompressor"
             classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
        <classpath>
            <pathelement location="${jar.yui.compressor}"/>
            <pathelement location="${jar.yui.anttask.compressor}" />
        </classpath>
    </taskdef>

    <yuicompressor todir="${build.static.content.min}" charset="utf-8" 
        preserveallsemicolons="true" munge="true" >
        <fileset dir="${src.static.content}">
            <include name="**/*.css"/>
            <include name="**/*.js"/>
        </fileset>
    </yuicompressor>
</target>
1
Reverse Tarzan

Я пишу каркас для управления веб-активами, называемый humpty . Он стремится быть проще и современнее, чем jawr или wro4j, используя WebJars и ServiceLoaders.

Как это интегрировать? Является ли это частью вашего инструмента сборки, фильтра сервлетов, отдельной программы пост-обработки файла WAR или чего-то еще?

В процессе разработки сервлет обрабатывает активы по мере необходимости. Ресурсы будут предварительно скомпилированы перед производством и помещены в общую папку, так что единственная используемая часть генерирует правильные включения в HTML.

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

Это будет сделано путем переключения между режимами разработки и производства.

Работает ли он прозрачно или имеет какие-либо побочные эффекты (помимо тех, которые присущи минификации), которые я должен учитывать в своей повседневной работе?

Я считаю, что это прозрачно, но сильно поддерживает использование WebJars.

Какой минификатор он использует?

Какой из плагинов вы используете в своем classpath. В настоящее время изучаю возможность написания плагина для компилятора Google Closure.

У него нет каких-либо особенностей, о которых вы можете подумать?

Все еще предварительный релиз, хотя я использую его в производстве. Плагин Maven все еще требует много работы.

Что вам нравится в нем?

Простота простого добавления зависимости для настройки фреймворка

Что тебе не нравится в этом?

Это мой ребенок, я люблю все это;)

1
Mwanji Ezana