Skip to main content
New tool CRON Expression Builder — preview next run times before you schedule Apex. Open the builder →
A Salesforce developer debugging code, illustrating the best practice to use $Resource when loading scripts.
LWC

Always use $Resource while loading scripts and styles

Always make use of $Resource instead of relative paths to static resource to avoid file caching issues.

Vinay Vernekar · 2 min read
The short answer

Referencing a static resource through the global $Resource variable in a Lightning component avoids the browser caching problem you hit after updating a script or a stylesheet. $Resource puts the current version number into the resource URL, so the new file loads immediately.

Key takeaways Reference static resources with the global $Resource variable rather than a hardcoded path such as /resource/ResourceName. Load several scripts out of one zipped resource with the join() function inside the scripts attribute of ltng:require. Check the browser network tab to see whether the component pulled a cached copy of the resource or the file you just uploaded. Because $Resource puts the current version number in the URL, each version still caches well and your updates show up straight away.

Recently, I was building lightning component to show charts. For that, I wanted to use Charts.js library into my component. Along with that, I had another script "execute.js" which I want to load. So in total 2 scripts I wanted to load at the start of page. After loading the scripts, I want to call method "initialiseSetup" from lightning controller.

I created zip file, added these two scripts and uploaded them in static resource with name "chart_scripts". I used following syntax to achieve that. Pretty straightforward right?

<aura:component >
    <ltng:require scripts="/resource/chart_scripts/Chart.min.js, /resource/chart_scripts/execute.js" afterScriptsLoaded="{!c.initialiseSetup}">
    </ltng:require>
</aura:component>

Suddenly I saw there is some mistake in my execute.js, I did some modifications into the file, override existing file with newly modified file into zip and uploaded in same static resource. It supposed to work right? but wait. It didn't. I tried to check if there is any logical errors in script, but no.

Then I checked if the updated script is getting referred or not through network tab of Chrome browser. Surprisingly it was referring to old JavaScript file which I uploaded initially. Salesforce basically cached that file.

Upon researching I found the Salesforce official article regarding this behavior, as per the article:

It is highly advised to use URLFOR($Resource.ResourceName) instead of referencing /resource/ResourceName directly. Using URLFOR with the resource will put the current version number in the URL path, and that allows updates to the resource to get used instantly by the pages while maximizing the cacheability of each version.

And there I go, I did the same thing. Earlier, I provided relative URL paths for static resource instead of using global $Resource variable. I then changed the code as follows:

<aura:component >
    <ltng:require scripts="{!join(',', $Resource.chart_scripts+'/Chart.min.js',$Resource.chart_scripts+'/execute.js')}" 
                  afterScriptsLoaded="{!c.initialiseSetup}">
    </ltng:require>
</aura:component>

And voila! it worked. Its now referring to new file that you upload in static resource file rather than cached file.

So always make use of $Resource to refer static resource to avoid caching issues.

Frequently asked questions

Why does Salesforce load an outdated version of an updated static resource?

A relative path such as /resource/ResourceName carries no version identifier, so the browser keeps serving the copy it already cached instead of the file you just uploaded.

How do you avoid static resource caching in Lightning Aura components?

Reference the resource with the global $Resource variable inside the <ltng:require> tag rather than a hardcoded URL path. The version number then appears in the URL, so an updated file is fetched immediately.

How do you load multiple scripts from a static resource zip in an Aura component?

Use the join() function inside the scripts attribute of <ltng:require> to comma-separate each concatenated $Resource file path. The afterScriptsLoaded attribute then runs a controller action once the scripts have loaded.

Newsletter

One email every Tuesday

New guides, tool updates, and the release-note changes that break things.

No spam. Unsubscribe in one click.

Agentforce Use Cases: Start with Simple, Deterministic TasksAgentforce & AI

Agentforce Use Cases: Start with Simple, Deterministic Tasks

8 Practical Agentforce Use Cases for Salesforce DevelopersApex

8 Practical Agentforce Use Cases for Salesforce Developers

Agentforce 2.0 - Practical Use Cases for Salesforce TeamsAgentforce & AI

Agentforce 2.0 - Practical Use Cases for Salesforce Teams

Comments

Loading comments...

Leave a Comment