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>
上記で対応は完了です。
実行結果
実行結果は変わりません。
ネットワーク状態をみてみます。
読み込むファイルが1つだけになっています。
モジュールをどんなに分割してもリクエストは増えないのが嬉しいですね。
さくっと書きました。