Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for defer script tag #72

Merged
merged 2 commits into from
Apr 19, 2021
Merged

Conversation

jeroenbell
Copy link

Similar to the async script tag, this adds an option js.useDefer which adds <script defer ...>. When enabling both options, most browsers will prefer async, and fall back to defer when support is limited.

@jeroenbell
Copy link
Author

@sir-dunxalot what do you think of this proposal?

index.js Outdated
}
return '<script src="' + path + '"></script>\n';

return '<script' + scriptAttributes.join('') + ' src="' + path + '"></script>\n';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about adding the space in the join()? That seems less prone to future contribution error. For example:

scriptAttributes.push('async');

Then

return '<script' + scriptAttributes.join(' ') + ' src="' + path + '"></script>\n';

@sir-dunxalot
Copy link
Owner

Hey @jeroenbell, I think this is OK! The only reason I am tentative is because I do not know if there will be any side effects of using defer in Ember apps. Have you been able to manually test this? I assume this will be fine but I'll see if I can find any info on using async and defer with Ember unless you provide a link to some docs, etc.

Left a minor comment on the PR too - your call whether you want to address the comment.

@jeroenbell
Copy link
Author

Hey @jeroenbell, I think this is OK! The only reason I am tentative is because I do not know if there will be any side effects of using defer in Ember apps. Have you been able to manually test this? I assume this will be fine but I'll see if I can find any info on using async and defer with Ember unless you provide a link to some docs, etc.

Left a minor comment on the PR too - your call whether you want to address the comment.

I've addressed your comment 🙂

We have done some internal testing with one of our applications using async and defer for SEO reasons, and have found no problems so far. But you're right about the fact there isn't much to find about this online.

One thing I would like to add, is when using either async or defer, it would be best to add the {{content-for 'js'}} hook in the <head> tag (https://flaviocopes.com/javascript-async-defer/). So it would be best to update the docs as well.

@sir-dunxalot
Copy link
Owner

Thanks @jeroenbell. I'm going to do a bit more reading but think this change is fine, especially since this is an 'opt-in' feature of sorts. Documentation and tests will need updating but that can be done after merge, before release.

@sir-dunxalot sir-dunxalot merged commit 000ce1c into sir-dunxalot:master Apr 19, 2021
sir-dunxalot added a commit that referenced this pull request Apr 19, 2021
@sir-dunxalot
Copy link
Owner

Released in 2.3.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants