How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less

Question

I like to know if there is a way to control css and js resources order in XPages Themes or Custom controls. Two reasons for this:

1. Performance: Is well known that when you place js files before the closing body tag the render is faster for the user (link). I can do that placing a script tag at the bottom of the Xpage or custom control but if I do so I'll lost the huge performance adventages I got when I use the resource tag and then check Application > Properties > Xpages > Performance > Use runtime optimized Javascript and CSS resources (in the latter case, js files are placed in the head tag).

2. libraries like Handlebars and Less: using resources tags I can add js and css with content-type text/css or application/x-javascript but with libraries like Handlebars and Less (really useful libs) I need different content-type or attributes.

This question is mainly on performance because it already works using link and script tags in custom controls like this:

Handlebars:

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

Less:

<link rel = "stylesheet/less" type="text/css" href="css/styles.less" />
<script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" ></script>

...but I feel a little dirty :)

Sven Hasselbach Sven Hasselbach · Accepted Answer · 2014-01-14T11:04:01

If possible try to use the non-blocking pattern for your JavaScript libraries. This should prevent performance problems:

<script>
   var s = document.createElement("script"),
   t = document.getElementsByTagName("script")[0];

   s.src="js/vendor/less-1.6.0.min.js";       
   t.parentNode.insertBefore(s, t);
</script>

EDIT:

<xp:script clientSide="true" type="text/x-handlebars-template" contents="template content">
   <xp:this.attrs>
      <xp:attr name="id" value="entry-template" />
  </xp:this.attrs>
</xp:script>


<xp:linkResource type="text/css" href="css/style.less" rel="stylesheet/less" />

How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less

1 Answers