RequireJS-オプティマイザー

この章では、RequireJSでの最適化について説明します。 RequireJSのオプティマイザーには、次の特性があります-

デフォルトで使用する場合はhttps://github.com/mishoo/UglifyJS[UglifyJS]、Javaを使用する場合はhttps://developers.google.com/closure/compiler/[Closure Compiler]のヘルプとスクリプトファイルを組み合わせます
CSSファイルを結合します。

オプティマイザーは、https://github.com/requirejs/r.js [Node and Nashorn]用の r.js アダプターのコンポーネントです。開発プロセスではなく、ビルドプロセスの一部として開発されています。

例

プロジェクトフォルダに_r.js_をダウンロードした後、フォルダの構造は以下のようになります-

projectfolder/
   |-->indexl
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

HTMLファイルは次のようになります-

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>

   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

_main.js_ファイルは次のようになります-

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2,
   dependent3) {
});

_main.css_ファイルは次のようになります-

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

オプティマイザーの基本設定

プロジェクトの設定には、コマンドライン引数またはプロファイル作成プロパティを使用できます。どちらも相互に交換可能です。

以下は、コマンドラインの構文です-

node r.js -o baseUrl = . paths.jquery = content/path/jquery
   name = main out = main-built.js

プロファイルを構築するための構文は次のとおりです-

({
   baseUrl: ".",

   paths: {
      jquery: "content/path/jquery"
   },

   name: "main",
   out: "main-built.js"
})

この後、以下に示すように、コマンドラインでビルドプロファイル名をオプティマイザーに渡すことができます-

node r.js -o build.js

コマンドライン引数の構文にはいくつかの欠点があります。コマンドライン引数またはプロファイル作成プロパティの両方を組み合わせて使用すると、これらの欠点を克服できます。

単一のJSファイルの最適化

単一のJSファイルを最適化するには、そのすべての依存関係のコンテンツを含むJSファイルを作成する必要があります。あなたのファイルは以下のように見えるはずです-

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },

   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"
      },

      "underscore": {
         exports: "_"
      }
   },

   name: "../main",
   out: "../built/js/main.js"
})

これで、アプリのすべての依存関係を含む_main.js_ファイルを作成できます。このファイルは、1つの要求ですべてのJSファイルをロードするためにHTMLファイルで使用されます。作成されたファイルは、ソースコードディレクトリにあるべきではないことに注意してください。ファイルはプロジェクトのコピーにある必要があります。

CDNリソースの使用

オプティマイザーは、ネットワークリソース/CDN（コンテンツ配信ネットワーク）を使用してスクリプトをロードしません。場合には、スクリプトをCDNを使用してロードする必要があります。次に、これらのファイルをモジュール名にマップし、ファイルをローカルファイルパスにダウンロードする必要があります。次の構文に示すように、ビルドプロファイルのパス構成で特別な単語「空」を使用できます-

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",

   paths: {
      jquery: "empty:"
   }

})

メインファイルは次のようになります-

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

単一のCSSファイルの最適化

CSSファイルは、次のようにコマンドラインで次のパラメーターを直接使用して最適化されます-

node ../../r.js -o cssIn = main.css out = main-built.css

CSSファイルは、以下に示すのと同じプロパティを使用してビルドファイルで最適化することもできます-

...
cssIn:"main.css",
out:"main-built.css"
...

上記の方法は両方とも許可されており、_projectfolder/css/mainbuild.css_というファイルを作成します。このファイルには、main.cssの内容、url（）パスが適切に調整され、コメントが削除されます。

プロジェクト全体の最適化

オプティマイザーはビルドプロファイルを使用して、すべての css および js ファイルを最適化します。次の例では、_build.js_ファイルが作成されます。

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },

   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"
      },

      "underscore": {
         exports: "_"
      }
   },

   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],

   dir: "../built"
})

_build.js_ファイルは、RequireJSにすべてのアプリフォルダー（appDirパラメーター）をビルドされた出力フォルダー（dirパラメーター）にコピーし、すべての最適化を出力フォルダーにあるファイルに適用するよう指示します。次のコマンドを実行して、アプリフォルダーにプロファイルを作成します-

node r.js -o build.js

Requirejs-optimizer

目次