[requirejs][JavaScript]r.jsを使って結合とminify

REQUIREJS OPTIMIZER
というのを読んで、r.jsを使って1つのファイルにまとめて(結合)かつ最小化する方法を調査しました。

まずは、下記コマンドをうってインストール

npm install -g requirejs

windowsの場合は、基本的には下記コマンドをうって実行をする。

r.js.cmd

r.jsを実行するにあたって、設定ファイルを作る必要がある。

ファイル名は任意で問題ないので、ここでは、build.jsとする。

({
    baseUrl: ".",
    paths: {
        jquery: "hoge/jquery",
        underscore: "hoge/underscore",
    },
    name: "main",
    out: "main-built.js"
})

上記ファイルを保存した上で、

r.js.cmd -o build.js

と実行すればおｋ
name属性は、

<script data-main="scripts/main" src="scripts/require.js"></script>

のmainの部分で、outは出力するファイル名。
ってことで、

<script data-main="scripts/main-built" src="scripts/require.js"></script>

とすれば解決する。

ただ、これでも呼び込みファイルは2ファイルで、どうせなら1ファイルにしたい。

その場合は、

({
    baseUrl: ".",
    paths: {
        requireLib:'hoge/require',
        jquery: "hoge/jquery",
        underscore: "hoge/underscore",
    },
    name: "main",
    include: "requireLib",
    out: "main-built.js"
})

という形で、require.jsファイルのパスを指定すれば1ファイルにすることができる。

requireは予約語なので、requireLibパラメータとして設定する必要があるのに注意。

で、結果的に、下のように1ファイルで実行することができる。

<script src="scripts/main-built.js"></script>

確かにパフォーマンスは改善されると思うのだが、他のページでも使われる共通ファイルがある場合、バージョンアップが発生すると上を適用している全ファイルを対応させなければないので、一長一短なのかなと。