How to defer loading of plugin scripts in Jira native pages?

Ricardo Herrera

Since Jira 9 deferring scripts is possible and release notes say quote:

"To speed up the loading of the App header and improve overall Jira performance, we’re now deferring JavaScript resources on the following pages :

• Issue View: <your Jira URL>/browse/ISSUEKEY-1
• Project-centric Issue Navigator: <your Jira URL>/projects/MNSTR/issues/ISSUEKEY-1?filter=allopenissues
• Global Issue Navigator: <your Jira URL>issues/?jql=
• <span>Dashboard (including system dashboard): <your Jira URL>/secure/Dashboard.jspa?selectPageId=1"</span>

Question 1: does this mean that, if I developed a plugin with some web <span>resources to be embedded in the issue page, e.g:</span>

<web-resource ...>
  <resource type="download" name="my-resource" location="js/myscript.js" />
  <context>jira.view.simple</context>
</web-resource>

  are they (myscript.js) going to be deferred automatically?

Question 2: if not, is there a way to do it?

Sandeep_e4emhu

No, simply declaring a web resource with the jira.view.simple context does not automatically make it deferred in Jira 9+. The deferral mentioned in the release notes applies specifically to Jira's own internal JavaScript resources for the app header and certain core functionalities. Custom web resources added by plugins are not included in this automatic deferral.

 

----

Yes, you can defer your custom web resources. Here's how:

1. defer Attribute (Recommended): The most straightforward approach is to use the defer attribute directly in your web resource declaration:

This tells Jira to load myscript.js asynchronously, after the HTML parsing is complete. This is the preferred method and generally works well.

2. Asynchronous Loading (JavaScript): If, for some reason, the defer attribute doesn't work as expected or you need more fine-grained control, you can implement asynchronous loading in your JavaScript code:

// myscript.js
function loadMyScript() {
    // Your script's code here
}

if (document.readyState === 'loading') {  // Loading hasn't finished yet
    document.addEventListener('DOMContentLoaded', loadMyScript);
} else {  // `DOMContentLoaded` has already fired
    loadMyScript();
}

This code checks the document's ready state. If the page is still loading, it attaches an event listener to the DOMContentLoaded event, which fires when the HTML parsing is complete. If the page has already finished loading, it executes the script immediately.

Important Considerations:

• Dependencies: If myscript.js depends on other JavaScript libraries or resources, ensure those dependencies are loaded before myscript.js. You might need to adjust the loading order or use a module loader like RequireJS or Webpack.
• Jira API: If your script interacts with the Jira API (e.g., AUI), make sure the API is available before your script runs. The defer attribute and the DOMContentLoaded event generally ensure this, but double-check if you encounter issues.
• Testing: Thoroughly test your plugin after implementing deferred loading to verify that your scripts function correctly and don't cause any conflicts or errors.

By using the defer attribute or implementing asynchronous loading in your JavaScript, you can improve the initial load time of Jira's issue view and other pages by deferring the execution of your custom scripts. This leads to a better user experience, especially on pages with complex or resource-intensive plugins.