1

As described here

http://docs.releasenotes.salesforce.com/en-us/spring15/release-notes/rn_lightning_load_resources.htm

you can load external JS or CSS files (stored as static resources) like this

<ltng:require 
    scripts="/resource/jsLibOne,/resource/jsLibTwo"
    styles="/resource/cssOne,/resource/cssTwo" 
/>

However if you update jsLibOne for instance, the chances are high that you will end up witch a cached version.

This never happened in Visualforce using e.g.

<apex:includeScript value="{!$Resource.jsLibOne}"/>

How can it be enforced, that the current version is loaded regardless of any cachings?

It is very dangerous to assume that for users clearing the browser's cache could be a solution. During development time this is nothing more than a burden. But after the component is in the wild, you can't ensure that it runs with the current versions of libraries which might be crucial even for data integrity. It's even pretty sure that the user will run obsolete code.

Extension 1:

I found in the documentation that ltng:require also takes care that the same library referenced across multiple components in an app will be loaded only once. I'm looking for answers that do not breaks this or ensure this, too.

Uwe Heim
  • 28,350
  • 18
  • 115
  • 283

2 Answers2

3

As of Summer '16 you can use the $Resource global in Lightning:

<ltng:require scripts="$Resource.<resource name>" />

For archived resources:

<ltng:require scripts="$Resource.<resource name> + '/js/script.js'" />

And use join() for multiple resources:

<ltng:require styles="{!join(',', 
                      $Resource.SLDS090 + '/assets/styles/salesforce-lightning-design-system-ltng.css', 
                      $Resource.font_awesome + '/font-awesome-4.4.0/css/font-awesome.min.css',
                      $Resource.ionicons + '/ionicons-2.0.1/css/ionicons.min.css')}"/>

A timestamp will be automatically added so you don't need to generate your own numbers anymore.

unhinged
  • 354
  • 3
  • 13
0

In Visualforce 

<apex:includeScript value="{!$Resource.jsLibOne}"/>

is adding a timestamp to the script-URL automatically like this

/resource/1445439049000/jsLibOne

The number 1445439049000 is a timestamp incremented automatically by the platform. This effectively prevents you from loading obsolete stuff.

Now <ltng:require ... /> seems not do this out-of-the-box. But you can help yourself

<ltng:require 
    scripts="/resource/2000/jsLibOne,/resource/jsLibTwo"
    styles="/resource/2000/cssOne,/resource/cssTwo" 
/>

Now if you change a file, you need to increment the value 2000 eg. to 2001. Unfortunately it's not fully automatic like in Visualforce. One approach could be to add the script and link tags dynamically by JavaScript like shown here https://developer.salesforce.com/blogs/developer-relations/2015/03/reports-salesforc1-lightning-components-jquery-mobile.html

loadJS : function(source, callback) {
    var loadScript = document.createElement('script');
    loadScript.setAttribute('src', source);
    loadScript.onload = callback;
    document.head.appendChild(loadScript);
},
loadCSS : function(source, callback) {
    var fileref = document.createElement('link');
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", source);
    fileref.onload = callback;
    document.head.appendChild(fileref);
}

You can provide the URL using timestamps to that functions like

this.loadCSS('/resource/'+Math.round((new Date()).getTime())+'/jsLibOne', function() {});

Any better approach is welcome!

Update

I haven't tested it, but I doubt that these workarounds do comply with Extension 1 of the OP.

Uwe Heim
  • 28,350
  • 18
  • 115
  • 283