最適化のカスタマイズ
ビジュアル・アプリケーションがステージおよび公開の場合、各Webアプリケーションのリソースが最適化され、パフォーマンスが向上します。 最適化されたリソース・バンドルに含めるリソースおよび除外するリソースを指定する場合は、独自の最適化構成をbuild.jsonファイルに定義できます。
最適化には、デフォルトで、正規表現
.*(\\.(js|json|html|css))$と一致するすべてのapplicationリソースが、vb-app-bundleという名前の最適化されたリソース・バンドルに含まれます。 このプロセス中に、アプリケーション・スタイルシート、HTMLおよびJSONファイルが最小化され、ビジュアル・アプリケーションがステージおよび公開になるように準備する埋込みビルド・サーバーに作成されるRequireJSバンドルが最小化されます。 この構成をカスタマイズしてリソースを追加および除外するには、アプリケーションをステージングおよび公開する前に、build.jsonファイルを作成し、独自の構成を定義する必要があります。
build.jsonの最適化構成
build.jsonファイル(/webApps/app_name/settingsの下にあり、app-level設定エディタからアクセス可能)を作成する場合、アプリケーションの最適化されたリソース・バンドルに含めたり除外したりするリソースを指定できます。
すべてのリソースを含めて、特定のリソースを除外
最適化には、デフォルトで、正規表現
.*(\\.(js|json|html|css))$と一致するすべてのアプリケーション・リソースが、vb-app-bundleという名前の最適化されたリソース・バンドルに含まれます。 デフォルト設定を次に示します: {
"optimize": {
"require-js": {
"vb-bundles-config": {
"vb-app-bundle": {
"modules": {
"find": [
".*(.(js|json|html|css))$"
]
}
}
}
}
}
}この構成を拡張すると、たとえば、アプリケーションのソースの一部である一部のサードパーティ・ライブラリ(
bcrypt.minおよびcrypto-js (deal-registrationフローに対して定義)を除外できます。 この場合、build.jsonを定義する方法を次に示します: {
"optimize": {
"require-js": {
"vb-bundles-config": {
"vb-app-bundle": {
"modules": {
"find": [
".*(.(js|json|html|css))$",
"!bcrypt.min",
"!^flows/deal-registration/crypto-js"
]
}
}
}
}
}
}find要素は、アプリケーションと一致する正規表現のリストを指定します。 感嘆符(!)で始まる正規表現は負とみなされるため、これらのパターンに一致するリソースは含まれません。
特定のリソースを含めるおよび除外
次に、
vb-app-bundleに特定のリソースを追加する例を示しますが、fontawesomeファイルは除外します:{
"optimize": {
"require-js": {
"vb-bundles-config": {
"vb-app-bundle": {
"modules": {
"find": [
"app-flow.js",
"^build",
"!^build/components/oj-odcs/2.5.1/fontawesome",
"^flows/",
"^pages/",
"^resources/strings",
"^resources/css",
"^services/"
]
}
}
}
}
}
}アプリのリソースをバンドルに編成する方法は、アプリケーションの構造と、アプリケーションの起動に不可欠なものによって異なります。 アプリケーションで実際に必要なものが1つのバンドルに配置され、残りが1つ以上の他のバンドルに配置されるように、リソースをバンドルしてみてください。
次に、3つの特定のRequireJSモジュール・バンドルを作成するために定義された構成の例を示します:
- アプリケーション・フロー
dashboardに属するすべてのリソースに対して1つ。 このバンドルには、flows/dashboardパターンに一致するすべてのファイル(つまり、flows/dashboardディレクトリに格納されているすべてのページ、モジュール、リソースおよびネストされたフロー)が含まれます。 ただし、ページ・モジュールの1つによって参照されるhelpersモジュールは除外されます。 - アプリケーション・フロー
customersに属するリソースに2つ。 この場合、参照されるhelpersモジュールと同様に、ネストされたフロー(後で別のバンドルに配置される)は除外されます。 customersフローのネストされたフローに属するリソースに3つ。
これらの3つのバンドルに加えて、4番目のbaseバンドルには、シェル・ページ、ライブラリ、スタイルなどのアプリケーション・リソースが含まれます。 このバンドルは、参照されるhelpersモジュールを明示的に追加します。
{
"optimize": {
"require-js": {
"vb-bundles-config": {
"dashboard": {
"modules": {
"find": [
"flows/dashboard"
]
},
"exclude": {
"ids": [
"helpers"
]
}
},
"customers": {
"modules": {
"find": [
"flows/customers",
"!flows/customers/flows"
]
},
"exclude": {
"ids": [
"helpers"
]
}
},
"customers-nested": {
"modules": {
"find": [
"flows/customers/flows"
]
}
},
"base": {
"modules": {
"find": [
"app-flow.js",
"^pages/",
"resources/strings",
"resources/css"
],
"ids": [
"helpers"
]
}
}
}
}
}
}emptyPathsを使用したリソースの除外
アプリケーションにサード・パーティ・ライブラリを参照するカスタムwebコンポーネント(
ckeditorを参照するresources/components/mycomponentなど)が含まれる場合、そのコンポーネントをバンドルに含める必要があり、サードパーティ・ライブラリは含めない場合があります。 これを行うには、build.jsonで"!^resources/components/mycomponent/ckeditor"を使用します。 ただし、バンドル内のコードがライブラリを参照する場合、ライブラリは引き続き含まれます。 カスタムwebコンポーネント自体のコード、またはこのライブラリを参照するファイル内のコード(たとえば、'resources/components/mycomponent/ckeditor'を参照するバンドルに含まれるapp-flow.jsファイルのコード)です。 このような場合、emptyPaths要素をbuild.jsonに追加して、依存性を無視し、そのサブ依存関係を再帰的に走査しないようにできます: {
"optimize": {
"require-js": {
"emptyPaths": [
"ckeditor"
],
"vb-bundles-config": {
"dashboard": {
"modules": {
"find": [
"flows/dashboard"
]
},
"exclude": {
"ids": [
"helpers"
]
}
},
"base": {
"modules": {
"find": [
"app-flow.js",
...複数のライブラリを無視する
emptyPaths定義の例を次に示します: {
"optimize": {
"require-js": {
"emptyPaths": [
"ckeditor",
"ckeditor-jquery"
],
...Gruntfile.js構成をbuild.jsonに移行する方法
Gruntタスクを使用してアプリケーションを最適化する場合は、Gruntfile.jsファイルにすでに定義した構成をbuild.jsonに移行することが重要です。 build.jsonにこの定義がない場合、アプリケーションがステージングおよび公開のときにデフォルトで発生するリソース最適化には、カスタマイズは含まれません。
- ナビゲータでwebアプリケーションを選択し、「設定」をクリックしてアプリケーション・レベルの設定エディタを開きます。
- 「最適化」の下の「ビルド構成を開く」をクリックして、applicationのbuild.jsonファイルを開きます。 このオプションが表示されない場合は、「ビルド構成の作成」をクリックしてbuild.jsonファイル(
/webApps/app_name/settingsの下)を作成し、設定エディタ内から開きます。 - このスニペットをbuild.jsonに追加します:
{ "optimize": { "require-js": { "emptyPaths": [ ], "vb-bundles-config": { } } } } - applicationの
Gruntfile.jsファイル(ソース・ビューの「ビジュアル・アプリケーション」のルートにあります)を開きます。 - 次の構成を
Gruntfile.jsからbuild.jsonに移動します:vb-require-bundle.options.bundlesの内容をGruntfile.jsからbuild.jsonのoptimize.require-js.vb-bundles-configに移動します。vb-require-bundle.options.emptyPathsの内容(定義されている場合)を、Gruntfile.jsからbuild.jsonのoptimize.require-js.emptyPathsに移動します。
JSONスキーマの構文を必ず修正してください。 たとえば、Gruntfile.jsとbuild.jsonの構成を並べて比較します:Gruntfile.js build.json 'use strict'; module.exports = (grunt) => { require('load-grunt-tasks')(grunt); grunt.initConfig({ "vb-require-bundle": { options: { emptyPaths: [ 'ckeditor', ], "bundles": { "vb-app-bundle": { "modules": { "find": [ "^flows/", "^pages/", "^resources/", "!^services/", ], }, }, }, }, }, }); };{ "optimize": { "require-js": { "emptyPaths": [ "ckeditor" ], "vb-bundles-config": { "vb-app-bundle": { "modules": { "find": [ "^flows/", "^pages/", "^resources/", "!^services" ] } } } } } } Gruntfile.jsonからvb-require-bundleを削除すると、ファイルは次のようになります:module.exports = (grunt) => { require('load-grunt-tasks')(grunt); };