Dynamic including and importing Javascript files

問題

javascript.barebone.files と javascript.everything.files の使用法は、Liferayのバージョン間で何が違うのでしょうか？

環境

Liferay DXP 7.0+

解決

Javascriptファイルのインポート

Liferay 7.0
Liferay 7.0では javascript.barebone.files と javascript.everything.files というportal.propertiesが存在し、/html/common/themes/top_js.jspで自動的にロードされるJavaScriptファイルをリストアップします。
この2つのリストに追加できるカスタムJSファイルは、Webアプリの“/html/js”フォルダに配置されている必要があります。

認証されていないユーザーは通常、利用可能なすべてのJavaScriptを利用しないため、パフォーマンス上の理由から2つのファイルリストが存在します。その名の通り、bareboneリストは、ほとんどの場合に必要なJavaScriptファイルの最低限のリストです。 everything リストには、bareboneリストに記載されていない他のすべてのファイルが含まれています。

ファイルのリストは、さらにパフォーマンスを向上させるために、everything.jsp または barebone.jsp にマージされ、パックされます。これは javascript.fast.load ポータルプロパティによって制御されます。

top_js.jspでどのように実装されているか見てみましょう。

<c:choose>
   <c:when test="<%= themeDisplay.isThemeJsFastLoad() %>">
      <c:choose>
         <c:when test="<%= themeDisplay.isThemeJsBarebone() %>">
            <script src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNDynamicResourcesHost() + themeDisplay.getPathJavaScript() + "/barebone.jsp", "minifierBundleId=javascript.barebone.files", jsLastModified)) %>" type="text/javascript"></script>
         </c:when>
         <c:otherwise>
            <script src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNDynamicResourcesHost() + themeDisplay.getPathJavaScript() + "/everything.jsp", "minifierBundleId=javascript.everything.files", jsLastModified)) %>" type="text/javascript"></script>
         </c:otherwise>
      </c:choose>
   </c:when>
   <c:otherwise>
      <%
         String path = themeDisplay.getCDNHost().concat(themeDisplay.getPathJavaScript());
         
         String[] javaScriptFiles = null;
         
         if (themeDisplay.isThemeJsBarebone()) {
         javaScriptFiles = JavaScriptBundleUtil.getFileNames(PropsKeys.JAVASCRIPT_BAREBONE_FILES);
         }
         else {
         javaScriptFiles = JavaScriptBundleUtil.getFileNames(PropsKeys.JAVASCRIPT_EVERYTHING_FILES);
         }
         
         for (String javaScriptFile : javaScriptFiles) {
         %>
      <script data-senna-track="permanent" src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, path + "/" + javaScriptFile, "minifierType=", jsLastModified)) %>" type="text/javascript"></script>
      <%
         }
         %>
   </c:otherwise>
</c:choose>

themeDisplay.isThemeJsFastLoad() の場合、 barebone.jsp または everything.jsp が読み込まれ、そうでなければ javascript.barebone.files または javascript.everything.files にリストされている JS ファイルが代わりに読み込まれます。
themeDisplay.isThemeJsBarebone() の場合、 barebone.jsp または javascript.barebone.filesに記載されているがJSファイルが読み込まれ、そうでなければ everything.jsp または javascript.everything.filesにリストされているJSファイルが代わりに読み込まれます。
themeDisplay.isThemeJsFastLoad() の値は、 javascript.fast.load ポータルプロパティがデフォルトで true になっていることで制御できますが、ここでは themeDisplay.isThemeJsBarebone()の値を確認してみましょう：

themeJsBareboneの値は、ServicePreActionクラスに設定されています。
```
boolean themeJsBarebone = PropsValues.JAVASCRIPT_BAREBONE_ENABLED;

if (themeJsBarebone && (signedIn || PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED)) {
 themeJsBarebone = false;
 }
```
ThemeJsBarebone値は、デフォルトで true である javascript.barebone.enabled ポータルプロパティによって設定されます。

PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED は、 javascript.single.page.application.enabled ポータルプロパティによって設定されます。これもデフォルトで true です。

ロジックに基づいて、 PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED の場合、bareboneはロードされません。それ以外の場合、bareboneにサインインしていない場合はロードされます。

そのため、デフォルトでは (javascript.single.page.application.enabled=true, javascript.fast.load=true) では everything.jsp がロードされ javascript.barebone.filesとjavascript.everything.filesの両方にリストされているファイルをマージしてパックしているため、JSファイルをbareboneとeverythingに分散させてもパフォーマンスの向上は見込めません。
Liferay 7.1+
Liferay 7.1から、 javascript.barebone.files と javascript.everything.files プロパティは、BNDヘッダーを使ってOSGi経由で設定できるため、非推奨となりました。これらのプロパティは将来のリリースで削除される予定です。

7.1 から、この機能は Liferay-JS-Resources-Top-Head-Authenticated および Liferay-JS-Resources-Top-Head bnd プロパティでポータルプロパティと同様に扱うことができます。

ユーザーが認証されていない場合は、 Liferay-JS-Resources-Top-Head にリストされているファイルが読み込まれ、ユーザーが認証されている場合は、にリストされているファイルが読み込まれます。そうすると、 Liferay-JS-Resources-Top-Head と Liferay-JS-Resources-Top-Head-Authenticated の両方にファイルが読み込まれます。

また、7.0と同様に、 javascript.single.page.application.enabled=trueでポータルを使用している場合、認証済みユーザーと非認証ユーザーの違いはありませんが、いずれの場合もすべての js ファイルが読み込まれます。

そのため、デフォルトではすべてのJSファイルが読み込まれるので、Liferay-JS-Resources-Top-Head-Authenticated と Liferay-JS-Resources-Top-Headのファイルを区別する必要はありません。
my-top-head-extender.zip と com.liferay.my.top.head.extender.jar ファイルを添付しました。
ポートレットでは、jsファイルを追加し、bnd.bndファイルに Liferay-JS-Resources-Top-Head-Authenticated と Liferay-JS-Resources-Top-Head を設定しました。

Javascriptファイルを動的に読み込む
Javascriptファイルをロードするには、Top JS Dynamic Includeという方法もあります。このソリューションでは、テーマのヘッドに追加のJavaScriptファイルを動的に、top_js.jspfの上にインクルードすることができます。

例として、ポートレットのソースの com.liferay.dynamic.include.jar と my-custom-dynamic-include.zip を添付しました。

追加情報

Top JS Dynamic Include

Javascriptファイルの動的インクルードとインポート

問題

環境

解決

追加情報