question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allowing scriptLoading type async in addition to defer

See original GitHub issue

Is your feature request related to a problem? Please describe. Loading a script with defer is executing the script as soon as it is loaded and therefore might interrupt other parsing. Adding the async attribute instead is allowing the browser to decide when to execute the script and therefore allows a better control over the importance of the script execution by the developer.

Describe the solution you’d like Add a scriptLoading option for async to control the described behaviour better.

Describe alternatives you’ve considered Currently i am using a deprecated Webpack plugin just to achieve this (script-ext-html-webpack-plugin).

Additional context There is currently a PR #1672 open for adding module as an option, adding async should be an easy addition to that PR.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
AirBorne04commented, Oct 27, 2021

Hi @jantimon,

that makes sense, i actually mixed up the behaviour of async and defer. After checking again the pros and cons i think it is a good decision to go with defer, as the use cases for async are rather slim.

0reactions
jantimoncommented, Mar 23, 2022

@guanzo I guess that’s really the case for async but unfortunately a real edge case for regular webpack users…

What you can do is to change the script loading with a hook to async or turn auto injection off

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scripts: async, defer - The Modern JavaScript Tutorial
In this example, loadScript(src) function adds a script and also sets async to false . So long.js always runs first (as it's added...
Read more >
Async & Defer — How to Load JavaScript Properly
async and defer are both attributes for the classic script tag in HTML, which allows us to specify how our external JavaScript should...
Read more >
javascript - Script Tag - async & defer - Stack Overflow
This image explains normal script tag, async and defer. enter image description here. Async scripts are executed as soon as the script is...
Read more >
Building the DOM faster: speculative parsing, async, defer and ...
We'll break down how defer and async work and how you can leverage the ... it starts parsing the HTML, adding nodes to...
Read more >
The Defer Attribute Explained - Jon D Jones
Using the async attribute on script load is better than loading a ... adding it first with defer should lessen the total page...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found