Dynamic including and importing Javascript files

Issue

What are the differences in the usage of javascript.barebone.files and javascript.everything.files across Liferay versions?

Environment

Liferay DXP 7.0+

Resolution

Importing Javascript files

in Liferay 7.0
On Liferay 7.0 there are the javascript.barebone.files and javascript.everything.files portal properties for listing the JavaScript files that will be loaded automatically in /html/common/themes/top_js.jsp
The custom JS files that can be added to these two lists must be located in the folder “/html/js” of a webapp.

The two lists of files exist for performance reasons because unauthenticated users usually do not utilize all the JavaScript that is available. As the name suggests, the barebone list is the minimum list of JavaScript files required for most cases. The everything list includes everything else not listed in the barebone list.

The list of files are also merged and packed into everything.jsp or barebone.jsp for further performance improvements, this is controlled by the javascript.fast.load portal property.

Let's see how it is implemented in the 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>

If themeDisplay.isThemeJsFastLoad() then the barebone.jsp or everything.jsp are loaded, otherwise the JS files listed at javascript.barebone.files or javascript.everything.files are loaded instead
If themeDisplay.isThemeJsBarebone() then the barebone.jsp or the JS files listed at javascript.barebone.files are loaded, otherwise the everything.jsp or the JS files listed at javascript.everything.files will be loaded instead
The themeDisplay.isThemeJsFastLoad() value can be controlled by the javascript.fast.load portal property which is true by default, but let's check the themeDisplay.isThemeJsBarebone():

The themeJsBarebone value is set in the ServicePreAction class:
```
boolean themeJsBarebone = PropsValues.JAVASCRIPT_BAREBONE_ENABLED;

if (themeJsBarebone && (signedIn || PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED)) {
 themeJsBarebone = false;
 }
```
The themeJsBarebone value is set by the javascript.barebone.enabled portal property which is true by default.

The PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED is set by the javascript.single.page.application.enabled portal property which is again true by default.

Based on the logic, if the PropsValues.JAVASCRIPT_SINGLE_PAGE_APPLICATION_ENABLED, then barebone is never loaded, otherwise if not signed in the barebone is loaded.

So by default (javascript.single.page.application.enabled=true, javascript.fast.load=true) the everything.jsp is loaded which is merging and packing the files listed at both javascript.barebone.files and javascript.everything.files, which means that the performance improvement cannot be leveraged by distributing the JS files between barebone and everything.
in Liferay 7.1+
From Liferay 7.1, the javascript.barebone.files and javascript.everything.files properties are deprecated because they can be configured via OSGi using BND headers. These properties will be removed in a future release.

From 7.1, this functionality can be handled with the Liferay-JS-Resources-Top-Head-Authenticated and Liferay-JS-Resources-Top-Head bnd properties similar to the portal properties.

If the user is not authenticated, then the files listed at Liferay-JS-Resources-Top-Head are loaded, and, if the user is authenticated, then the files are listed at both Liferay-JS-Resources-Top-Head and Liferay-JS-Resources-Top-Head-Authenticated are loaded.

In addition, similar to 7.0, if the portal is used with javascript.single.page.application.enabled=true, this won't make any difference between authenticated user and non-authenticated, in every case all js files will be loaded.

So, by default there is no need to differentiate between Liferay-JS-Resources-Top-Head-Authenticated and Liferay-JS-Resources-Top-Head files because all the JS files are loaded.
Attached the my-top-head-extender.zip and com.liferay.my.top.head.extender.jar files.
In the portlet, the js files have been added and the Liferay-JS-Resources-Top-Head-Authenticated and Liferay-JS-Resources-Top-Head have been set in the bnd.bnd file.

Dynamic including Javascript files
There is another way to load Javascript files via Top JS Dynamic Include: with this solution we are able to include additional JavaScript files to the theme’s head dynamically, exactly on top of top_js.jspf.

As an example, attached the com.liferay.dynamic.include.jar and the my-custom-dynamic-include.zip of the source of the portlet.

Additional Information

Top JS Dynamic Include