基於 ANT 與 YUI Compressor 實現 JS 合併壓縮構建腳本詳解

一、 構建目標與流程

1. 合併：將多個模塊 JS 按依賴順序合併為單文件 (`mapfuncall.js`)
2. 清理：移除調試代碼（如 `@DEBUG@` 佔位符）
3. 壓縮：YUI Compressor 壓縮合併文件及獨立文件 (`dataedit.js`, `ISuggest.js`)
4. 部署：將壓縮後 `.min.js` 複製回目標目錄覆蓋源文件

二、 核心 `build.xml` 完整配置解析

<project name="zjmap" default="cleanBuild" basedir=".">
    <!-- 屬性定義 -->
    <property name="root" value="WebRoot"/>
    <property name="js" value="${root}/js"/>
    <property name="map_function_js" value="${js}/mapfunc"/>
    <property name="lib" value="lib"/>
    <property name="build" value="build"/>
    <property name="charset" value="utf-8"/>

    <!-- 1. 創建構建輸出目錄 -->
    <target name="initBuildDir">
        <mkdir dir="${build}"/>
    </target>

    <!-- 2. 合併 JS 文件 (按依賴順序) -->
    <target name="concatJs" depends="initBuildDir">
        <concat destfile="${build}/mapfuncall.js" encoding="${charset}" outputencoding="${charset}">
            <path path="${map_function_js}/DC.js"/>
            <path path="${map_function_js}/stringUtil.js"/>
            <path path="${map_function_js}/LOCALDC.js"/>
            <!-- 此處省略 30+ 文件，按業務依賴順序排列 -->
            <path path="${map_function_js}/statisticsNew.js"/>
            <path path="${map_function_js}/Approval.js"/>
        </concat>
        <!-- 移除調試佔位符 -->
        <replaceregexp file="${build}/mapfuncall.js" match="@DEBUG@" replace="" flags="g" byline="true" encoding="${charset}"/>
    </target>

    <!-- 3. 壓縮任務鏈 -->
    <target name="compressAll" depends="concatJs">
        <antcall target="compressMapFuncAll"/>
        <antcall target="compressDataEdit"/>
        <antcall target="compressISuggest"/>
        <antcall target="copyCompressedJs"/>
    </target>

    <!-- YUI Compressor 壓縮單文件 -->
    <target name="compressMapFuncAll">
        <java jar="${lib}/yui/yuicompressor-2.4.6.jar" fork="true">
            <arg line="--type js --charset utf-8 ${build}/mapfuncall.js -o ${build}/mapfuncall-min.js"/>
        </java>
    </target>

    <target name="compressDataEdit">
        <java jar="${lib}/yui/yuicompressor-2.4.6.jar" fork="true">
            <arg line="--type js --charset utf-8 ${map_function_js}/dataedit.js -o ${build}/dataedit-min.js"/>
        </java>
    </target>

    <target name="compressISuggest">
        <java jar="${lib}/yui/yuicompressor-2.4.6.jar" fork="true">
            <arg line="--type js --charset utf-8 ${map_function_js}/ISuggest.js -o ${build}/ISuggest-min.js"/>
        </java>
    </target>

    <!-- 4. 複製壓縮結果回目標目錄 -->
    <target name="copyCompressedJs">
        <copy todir="${map_function_js}">
            <fileset dir="${build}">
                <include name="*-min.js"/>
            </fileset>
        </copy>
    </target>

    <!-- 5. 清理臨時目錄 -->
    <target name="cleanBuild" depends="compressAll">
        <delete dir="${build}"/>
    </target>
</project>

三、 關鍵任務詳解

1. `` 合併任務

• 順序即依賴：`path` 元素順序決定合併順序，**必須手動維護依賴拓撲序**
• 編碼一致性：`encoding`、`outputencoding` 統一指定 `utf-8`，避免中文亂碼
• 調試代碼清理：`` 移除 `@DEBUG@` 等標記，生產環境不輸出調試日誌

2. `` 調用 YUI Compressor

• fork="true"：獨立 JVM 進程運行，避免類加載衝突、內存洩漏
• 核心參數：
  • `--type js`：指定處理 JavaScript（也支持 css）
  • `--charset utf-8`：輸入輸出編碼
  • `-o`：輸出文件路徑
  • 可選：`--nomunge`（只壓縮不混淆）、`--preserve-semi`、`--disable-optimizations`

3. `` 部署任務

• `fileset` + `include="*-min.js"` 精確匹配壓縮產物
• 直接覆蓋源目錄，實現「原地壓縮替換」

四、 YUI Compressor 版本與已知限制

警告：YUI Compressor **已停止維護 10 年**，無法處理現代 JavaScript 語法，強行壓縮 ES6+ 代碼會報錯或產生錯誤代碼。

五、 現代構建工具遷移指南

新項目**強烈建議**直接使用現代工具鏈：

Vite 配置示例 (替代 ANT+YUI)

// vite.config.js
export default defineConfig({
    build: {
        minify: 'terser', // 或 'esbuild'
        terserOptions: {
            compress: { drop_console: true, drop_debugger: true },
            format: { comments: false }
        },
        rollupOptions: {
            input: {
                mapfuncall: 'WebRoot/js/mapfunc/main.js', // 入口文件自動處理依賴
                dataedit: 'WebRoot/js/mapfunc/dataedit.js',
                isuggest: 'WebRoot/js/mapfunc/ISuggest.js'
            },
            output: {
                entryFileNames: 'js/mapfunc/[name].min.js',
                chunkFileNames: 'js/mapfunc/chunks/[name].js'
            }
        }
    }
});

優勢：自動依賴分析（無需手動排序）、原生 ES6+ 支持、Source Map、增量構建、開發服務器熱更新。

六、 遷移檢查清單

1. 梳理現有 JS 依賴圖，確定入口文件
2. 將 `@DEBUG@` 替換為 `console.debug()` 或移除
3. 引入 ESLint + Prettier 統一代碼風格
4. 配置 `terser`/`esbuild` 壓縮選項（保留版權聲明、移除 console）
5. 設置 CI/CD 流水線執行 `npm run build`
6. 驗證生產環境功能、Source Map 上傳錯誤追蹤平台

七、 總結

ANT + YUI Compressor 曾是前端構建主流方案，通過 `` 合併、 `` 壓縮、 `` 部署實現自動化。但 YUI **不支持 ES6+、已停維**，現代項目應遷移至 **Vite/esbuild/Webpack** 等工具鏈，獲得語法支持、構建速度、開發體驗的全面提升。

1. 上一篇文章： JNI 調用導致 JVM 崩溃 (EXCEPTION_ACCESS_VIOLATION) 根因分析與排查指南
2. 下一篇文章： Eclipse 查看 JDK 源碼完整配置指南：關聯 rt.jar 到 src.zip

Java 相關知識

JDK 6 Scripting API 實戰：為 Swing 應用注入 JavaScript 動態擴展能力

示範如何使用 JDK 6 內建 Script Engine

解決 Mule ESB 發布 WebService 時 WSDL 中文亂碼問題：根因分析與修正方案

問題背景 使用 Mule ESB（基於 Spring-CXF

手把手教你構建第一個 Java Applet：從原始碼到瀏覽器運行完整教學

前置準備 必須先下載並安裝 Java SE Developm

Struts 框架核心原理與 1.1 新特性深度解析：從 Model 2 到多模塊架構

Struts 是基於 Model 2 實現的經典 MVC 框