摘要：是自帶的前端優化工具，可以對項目中的和代碼使用或者進行壓縮合并。這篇文章介紹的使用和配置方法，幫助大家解決使用中碰到的問題。對腳本的優化支持目前流行的和兩種壓縮方式，需要環境支持，而則需要環境。定義要被優化的模塊數組。

RequireJS Optimizer 是 RequireJS 自帶的前端優化工具，可以對 RequireJS 項目中的JavaScript和CSS 代碼使用?UglifyJS 或者?Closure Compiler 進行壓縮合并。這篇文章介紹RequireJS Optimizer 的使用和配置方法，幫助大家解決使用中碰到的問題。

RequireJS Optimizer 對腳本的優化支持目前流行的?UglifyJS 和 Closure Compiler 兩種壓縮方式，UglifyJS 需要 NodeJS 環境支持，而?Closure Compiler 則需要 Java 環境。這篇文章是以運行于 NodeJS 的 UglifyJS 來優化的，這也是?RequireJS Optimizer 默認的壓縮方法。

首先需要安裝?Node 0.4.0，然后下載 r.js，下載好以后就可以在命令行里對前端代碼進行優化了。r.js的參數傳遞使用方式，一是直接加在命令行后面，如下：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

二是新建一個配置文件，例如 build.js（推薦使用這種方式），這樣配置更方便，如下：

node r.js -o build.js

build.js 的配置代碼如下：

{
    baseUrl: "../js",
    dir: "../dist",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    mainConfigFile: "../js/main.js",
    removeCombined: true,
    fileExclusionRegExp: /^./,
    modules: [
        {
            name: "app/dispatcher",
        },
        {
            name: "app/in-storage",
            exclude: [
                "jquery",
                "app/common",
                "pkg/DatePicker/app"
            ]
        }
    ]
}

appDir

應用程序的最頂層目錄?？蛇x的，如果設置了的話，r.js會認為腳本在這個路徑的子目錄中，應用程序的文件都會被拷貝到輸出目錄（dir 定義的路徑）。如果不設置，則使用下面的 baseUrl 路徑。

baseUrl

　　默認情況下，所有的模塊都是相對于這個路徑的。如果沒有設置，則模塊的加載是相對于 build 文件所在的目錄。另外，如果設置了appDir，那么 baseUrl 應該定義為相對于 appDir 的路徑。

dir

輸出目錄的路徑。如果不設置，則默認為和 build 文件同級的 build 目錄。

optimize

JavaScript 代碼優化方式。可設置的值：

-   "uglify：使用?UglifyJS 壓縮代碼，默認值；
-   "uglify2"：使用?2.1.2+ 版本進行壓縮；
-   "closure"： 使用?Google"s Closure Compiler 進行壓縮合并，需要 Java 環境；
-   "closure.keepLines"：使用?Closure Compiler 進行壓縮合并并保留換行；
-   "none"：不做壓縮合并；

optimizeCss

CSS 代碼優化方式，可選的值有：

-   "standard"：標準的壓縮方式；
-   "standard.keepLines"：保留換行；
-   "standard.keepComments"：保留注釋；
-   "standard.keepComments.keepLines"：保留換行；
-   "none"：不壓縮；

mainConfigFile

如果不想重復定義的話，可以使用這個參數配置 RequireJS 的配置文件路徑。

removeCombined

刪除之前壓縮合并的文件，默認值 false。

fileExclusionRegExp

要排除的文件的正則匹配的表達式。

modules

定義要被優化的模塊數組。每一項是模塊優化的配置，常用的幾個參數如下：

- `name：`模塊名；

- `include：`額外引入的模塊，`create：`如果不存在，是否創建。默認`false`；

- `exclude：`要排除的模塊。有些模塊有公共的依賴模塊，在合并的時候每個都會壓縮進去，例如一些基礎庫。使用 exclude 就可以把這些模塊在壓縮在一個更早之前加載的模塊中，其它模塊不用重復引入。

RequireJS 配置也可以放到 RequireJS Optimizer?配置文件里面，例如：

{
    baseUrl: "../js",
    dir: "../dist",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    removeCombined: true,
    fileExclusionRegExp: /^./,
    modules: [
        {
            name: "app/dispatcher",
        },
        {
            name: "app/in-storage",
            exclude: [
                "jquery",
                "app/common",
                "pkg/DatePicker/app"
            ]
        }
    ],
    paths: {
        jquery: "lib/jquery",
        underscore: "lib/underscore",
        backbone: "lib/backbone/backbone",
        backboneLocalstorage: "lib/backbone/backbone.localStorage",
        text: "lib/require/text"
    },
    shim: {
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: [
                "underscore",
                "jquery"
            ],
            exports: "Backbone"
        },
        backboneLocalstorage: {
            deps: ["backbone"],
            exports: "Store"
        }
    }
}

RequireJS Optimizer 的配置參數還有很多，完整的參數介紹可以看這里：

example.build.js

為方便運行，可以新建一個批處理文件：

@echo off 

echo build...
e:
cd E:SCMSRCscm-html
ew-scm-html	ools

node r.js -o build.js

echo Press any key to exit! 
echo. & pause

注意事項：RequireJS Optimizer 只支持使用 require 和 define 語法定義的模塊，因此下面這種通過變量定義的方式是不支持的：

var mods = someCondition ? ["a", "b"] : ["c", "d"];
require(mods);

而如果是這樣定義則可以：

require(["a", "b"]);

或者：

define(["a", "b"], function (a, b) {});

使用 r.js 優化后的代碼可以使用 almond?來加載。almond 是一個輕量的 AMD 加載器，提供了最基礎的 AMD API 實現以及模塊加載功能。almond 只有不到 400 行代碼，要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到業務代碼的前面，如下：

(function () {
    //almond will be here
    //main and its nested dependencies will be here
}());

almond 特別適合使用 AMD 的網站或應用，但也有一些限制：

所有的模塊編譯為一個文件，沒有動態的加載；

所有的模塊都需要在 define() 定義 ID 和依賴，這個?RequireJS Optimizer 會處理；

只能有一個?requirejs.config() 或者 require.config() 調用；

不能使用 Require JS 多版本功能；

不能使用?require.toUrl() 或者 require.nameToUrl()；

不能使用?packages/packagePaths 配置。

如果你的項目中沒有這些問題的話，可以放心使用 almond 進行加載。

via 夢想天空