とある角度から

お腹いっぱいたべられる幸せ

RequireJSでモジュール管理してみるサンプル(2)

前回の記事
「RequireJSには、最適化ツール(r.js)を用いて、各モジュールをminifyし結合することができます」
といったので、それについてさくっと書きます。

セットアップ ~ 最適化の実行

前回のサンプルの構成をそのまま最適化していきます。

1.まず、最適化ツール(r.js)の使用にはnode.js環境が必要なため、以下のサイトからインストールします。
Node.js

インストール後、nodeとnpmのバージョンを確認します。
ターミナルから以下のコマンドを実行

node -v
npm -v

2.requirejsパッケージをインストールします。
ターミナルから以下のコマンドを実行

npm install -g requirejs

3.実際に最適化を適用します。
ターミナルから以下のコマンドを実行

r.js -o baseUrl=. name=page out=./page-built.js
  • baseUrl: jsファイルが含まれているフォルダ、今回はhtmlと同階層
  • name: 最終的に読み込むjs(data-mainに指定したjs)を指定
  • out: 出力するjsファイル名

4.正常に出力されたら、index.htmlのrequire.jsを読み込むスクリプトタグのdata-mainの指定を出力されたファイルに変更

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

上記で対応は完了です。

実行結果


実行結果は変わりません。

ネットワーク状態をみてみます。
f:id:n_1010real:20140512225533j:plain
読み込むファイルが1つだけになっています。
モジュールをどんなに分割してもリクエストは増えないのが嬉しいですね。
さくっと書きました。