RequireJS-オプティマイザー

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

一緒の助けを借りて、コンバインのスクリプトファイルUglifyJSデフォルトの使用またはのため閉鎖コンパイラのJavaの使用法について
CSSファイルを結合します。

オプティマイザーはのコンポーネントです r.jsNodeおよびNashorn用のアダプター。これは、開発プロセスではなく、ビルドプロセスの一部として開発されています。

例

プロジェクトフォルダにr.jsをダウンロードすると、フォルダの構造は次のようになります。

projectfolder/
   |-->index.html
   |-->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の構築された出力フォルダ（ディレクトリのパラメータ）に（APPDIRパラメータ）のすべてのアプリのフォルダをコピーして、出力フォルダ内にあるファイルへのすべての最適化を適用するファイルを指示RequireJS。次のコマンドを実行して、アプリフォルダーにプロファイルを作成します-

node r.js -o build.js