您如何為您的 Java Web 應用程序自動化 Javascript 縮小？

Question

我有興趣了解您更喜歡如何為 Java Web 應用程序自動化 Javascript 縮小。 以下是我特別感興趣的幾個方面：

• 它是如何集成的？ 它是構建工具的一部分、servlet 過濾器、后處理 WAR 文件的獨立程序還是其他東西？
• 是否容易啟用和禁用？ 嘗試調試一個縮小的腳本是非常無趣的，但對於開發人員來說，能夠測試縮小不會破壞任何東西也很有用。
• 它是否透明地工作，或者它是否有我在日常工作中必須考慮的任何副作用（除了縮小固有的那些）？
• 它使用哪個壓縮器？
• 它是否缺少您能想到的任何功能？
• 你喜歡它什么？
• 你不喜歡它什么？

這將主要作為我未來項目的參考（希望其他 SOer 也會發現它提供信息），所以各種工具都很有趣。

（請注意，這不是關於哪種壓縮器最好的問題。我們已經有很多這樣的壓縮器了。）

Answer 1

綜合帖子

如果您在此線程中發布新內容，請編輯此帖子以鏈接到您的帖子。

• Ant apply任務（使用 YUI Compressor）
• 自定義 YUI Compressor Ant 任務
• Maven YUI 壓縮器插件
• 顆粒（用於 JSP、JSF、Grails、Ant）
• Google Closure 編譯器的 Ant 宏
• wro4j（Maven、servlet 過濾器、純 Java 等）
• ant-yui-compressor（壓縮JS+CSS的螞蟻任務）
• 下水道
• 縮小 Maven 插件
• 矮胖的
• 使用 Terser 的 Ant exec任務

Answer 2

我們正在使用 Ant 任務在生產構建期間使用 YUICompressor 縮小 js 文件，並將結果放入單獨的文件夾中。 然后我們將這些文件上傳到 Web 服務器。

下面是一個例子：

<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>

Answer 3

我認為最適合這項工作的工具之一是wro4j查看https://github.com/wro4j/wro4j

它可以滿足您的一切需求：

• 保持項目網絡資源（js 和 css）井井有條
• 在運行時（使用簡單的過濾器）或構建時（使用 maven 插件）合並和縮小它們
• 免費和開源：在 Apache 2.0 許可下發布
• wro4j 支持的幾種壓縮工具：JsMin、Google Closure 壓縮器、YUI 等
• 非常容易使用。 支持 Servlet 過濾器、Plain Java 或 Spring 配置
• Javascript 和 CSS 元框架支持：CoffeeScript、Less、Sass 等
• 驗證：JSLint、CSSLint 等

可以在調試和生產模式下運行。 只需指定它應該處理/預處理的所有文件，剩下的就由它來完成。

您可以簡單地包含合並、縮小和壓縮的資源，如下所示：

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

Answer 4

我嘗試了兩種方法：

1. 使用 servlet 過濾器。 在生產模式下，過濾器被激活並壓縮任何綁定到 URL 的數據，如 *.css 或 *.js
2. 使用 maven 和yuicompressor-maven-plugin ； 壓縮是按原樣進行的，（組裝生產戰爭時）

當然后一種解決方案更好，因為它在運行時不消耗資源（我的 web 應用程序使用谷歌應用程序引擎）並且它不會使您的應用程序代碼復雜化。 因此，在以下答案中假設后一種情況：

它是如何集成的？ 它是構建工具的一部分、servlet 過濾器、后處理 WAR 文件的獨立程序還是其他東西？

使用 Maven

是否容易啟用和禁用？ 嘗試調試一個縮小的腳本是非常無趣的，但對於開發人員來說，能夠測試縮小不會破壞任何東西也很有用。

您只有在組裝最終戰爭時才能激活它； 在開發模式下，您會看到資源的未壓縮版本

它是否透明地工作，或者它是否有我在日常工作中必須考慮的任何副作用（除了縮小固有的那些）？

絕對地

它使用哪個壓縮器？

YUI壓縮機

它是否缺少您能想到的任何功能？

不，它非常完整且易於使用

你喜歡它什么？

它與我最喜歡的工具 (maven) 集成，插件位於中央存儲庫中（一個好的 maven 公民）

Answer 5

我為 Google Closure 編譯器和 Yahoo 壓縮器編寫了 ant 宏，並將此文件包含在不同的 Web 項目中。

<?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="--js=@{dir}/@{src}.js" />
        <arg line="--js_output_file=@{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 中，然后像往常一樣調用 ant 任務： <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 編譯器不能

Answer 6

我認為您需要一個壓縮庫，例如 Granule 標簽。

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

它使用不同的方法 gzip 和組合由 g:compress 標簽包裝的 javascripts，也有 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>
...

Answer 7

我真的很驚訝沒有人提到JAWR - https://jawr.github.io

它非常成熟，支持所有預期的標准功能，甚至更多。 以下是它如何與 OP 的優秀標准相抵觸。

它是如何集成的？ 它是構建工具的一部分、servlet 過濾器、后處理 WAR 文件的獨立程序還是其他東西？

它最初在應用程序啟動時進行處理/繁重的工作，並且基於servlet提供服務。 從 3.x 開始，他們增加了對構建時集成的支持。

對 JSP 和 Facelets 的支持是通過自定義 JSP 標記庫提供的，以導入已處理的資源。 除此之外，還實現了一個 JS 資源加載器，它支持從靜態 HTML 頁面加載資源。

是否容易啟用和禁用？ 嘗試調試一個縮小的腳本是非常無趣的，但對於開發人員來說，能夠測試縮小不會破壞任何東西也很有用。

在應用程序啟動之前可以使用debug=on選項，並且可以在生產中的各個請求中指定自定義GET參數，以便在運行時為所述請求有選擇地切換調試模式。

它使用哪個壓縮器？

對於 JS，它支持 YUI Compressor 和 JSMin，對於 CSS，我不確定。

它是否缺少您能想到的任何功能？

想到了SASS支持。 也就是說，它確實支持LESS 。

Answer 8

我們的項目已經通過多種方式處理它，但我們通過不同的迭代繼續使用YUI 壓縮器。

我們最初有一個 servlet 來處理 JavaScript 第一次訪問特定文件時的壓縮； 然后它被緩存。 我們已經有一個系統來處理自定義屬性文件，因此我們只需更新我們的配置文件以支持根據我們工作的環境啟用或禁用壓縮器。

現在，開發環境從不使用壓縮的 JavaScript 進行調試。 相反，在將應用程序導出到 WAR 文件時，我們會在構建過程中處理壓縮。

我們的客戶從未對壓縮提出過擔憂，開發人員在決定調試 JavaScript 之前不會注意到這一點。 所以我會說它相當透明，副作用很小（如果有的話）。

Answer 9

這對我有用： 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>

Answer 10

我正在編寫一個管理網絡資產的框架，稱為humpty 。 它的目標是通過使用 WebJars 和 ServiceLoaders 比 jawr 或 wro4j 更簡單、更現代。

它是如何集成的？ 它是構建工具的一部分、servlet 過濾器、后處理 WAR 文件的獨立程序還是其他東西？

在開發中，servlet 根據需要處理資產。 然后，資產將在生產之前預編譯並放置在公共文件夾中，以便唯一使用的部分是在 HTML 中生成正確的包含。

是否容易啟用和禁用？ 嘗試調試一個縮小的腳本是非常無趣的，但對於開發人員來說，能夠測試縮小不會破壞任何東西也很有用。

這將通過在開發和生產模式之間切換來完成。

它是否透明地工作，或者它是否有我在日常工作中必須考慮的任何副作用（除了縮小固有的那些）？

我相信它是透明的，但強烈支持使用 WebJars。

它使用哪個壓縮器？

無論您放在類路徑上的插件使用哪一個。 目前正在考慮為 Google Closure Compiler 編寫插件。

它是否缺少您能想到的任何功能？

雖然我在生產中使用它，但仍然是預發布版。 maven 插件還需要做很多工作。

你喜歡它什么？

只需添加一個依賴項來配置框架的簡單性

你不喜歡它什么？

這是我的寶貝，我愛這一切;)

Answer 11

在這里參加聚會真的很晚，但認為這可能會幫助仍在尋找不同答案的人：

在嘗試使用 YUI Compressor 后，我很失望它與更新版本的 jQuery 和 Prism（我的項目需要的兩個主要的 3rd 方 JS 庫，我想將它們壓縮到一個文件中）不兼容。 所以我決定使用Terser ，它是支持 ES6+ 的 Uglify-JS 的一個分支。 我無法使用<exec>任務直接運行它，但使用 Windows 命令行方法至少適用於 Win 10（不是說它不能工作，但這是一項非常簡單的工作-大約）。 無需向 Path 系統變量添加任何其他內容（因為 Node.JS 通常在安裝過程中添加）。 我首先使用 ANT <concat>任務來制作一個大的、未壓縮的文件。 使用<fileset>因為它會保留順序（如果這很重要，無論如何）。

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

然后使用<exec>任務運行任何 NPM 程序，例如 Terser。 此任務的Apache 手冊頁指出這是運行 .bat 文件的 Windows 解決方法，但它確實允許您運行幾乎任何命令行應用程序（甚至那些<exec>神秘地找不到的命令行應用程序）。

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

整合？ 它是 ANT 構建腳本的一部分（一個支持自定義 JavaScript 的 DITA Open Toolkit 插件，除此之外，它本身不是 Java Web 應用程序，而是使用 Java 構建 HTML5 輸出），因此集成只不過是添加那些任務到新目標（有更多關於設置默認值和檢查輸入參數的代碼！）。

易於啟用/禁用？ 就我而言，我有一個參數傳遞給 ANT Build，以便包括構建和縮小 JS 文件。 所以是的，如果我將參數設置為“是”，它只會執行這個目標。 在 ANT 構建中進行設置是一件非常容易的事情。

透明到目前為止，它似乎對我包含的幾個 JS 文件中的任何一個都沒有影響。 其中一些是我自己的（無論如何我都不是 JS 專家），還有一些，正如我所提到的，是常見的 JS 庫。

Minifier Terser，但您可以使用此方法使用幾乎任何通過命令行輸入進行的縮小。

缺乏特色？ Terser僅適用於 JavaScript。 如果我想對我的 CSS 文件做同樣的事情（我這樣做），我使用 YUI Compressor。

Like That它是一個當前活躍的項目並且有很好的支持。 另外，當前的實現（僅通過 ANT <exec>目標調用它）允許我在需要使用其他東西時更換縮小器。

不喜歡它需要 Node.JS。 沒有什么反對 Node.JS 的，請注意，只是這個特定的項目不需要它。 為此，我更喜歡使用像 YUI Compressor 這樣的 Java .jar 文件（如果需要，我可以使用插件輕松分發它）。