Support for defer and async JavaScript loading

[overshard]

Would be awesome to have javascript support for defer and async loading of scripts.

{% compress js defer %}{% endcompress %}

Or it just recognizes <script defer src="script.js"></script> and keeps the tag on compression if all the scripts have it.

[jezdez]

Don't know, you can easily override the appropriate templates used for rendering the resulting HTML. Isn't that enough?

[overshard]

I don't want to defer/asyc all javascript though, just certain scripts. i.e. I don't want my jquery and modernizr scripts deferred because they need to run immediately or they don't work properly, but my jquery plugins can run deferred having the page be more responsive quicker.

[jezdez]

I see, that makes sense.

[peterbe]

r- on this. django_compressor shouldn't be opinionated about such things. Let django_compressor just worry about the src and href attributes. However, as far as bundling, the original template ought to be respected.

In django-static (which I wrote but no longer maintain much) I made a hash based on defer and async so that if you do:

 {% slimall %}
<script defer src="foo.js"></script> 
<script async src="tox.js"></script>
<script defer src="bar.js"></script>
<script async src="bob.js"></script>
 {% endslimall %}

it would eventually split it up by attributes and bundle like this:

<script defer src="foo,bar.js"></script>
<script async src="tox,bob.js"></script>

[jezdez]

That's fine by me, too. FWIW, the concept @peterbe explains is the same what we do with media attribute already.

[ashwoods]

an optional template argument? I'm currently implementing fabjs with compress, that could be one solution when you are implementing compress with several outputs. Another would be just to include a "raw" argument, it just returns the path of the compressed file, but that would leave the COMPRESS=False part to the user, not as pretty as variant one.

[ashwoods]

been writing too many fabfiles, I meant integrating compressor with LABjs :)

[peterbe]

@ashwoods but if you rely on django_compressor to figure out the right LABjs "invocation" on "compile time", how do you test it when doing development?

[ashwoods]

@peterbe: right now I only have a dirty solution in that I test for compress = True and have two independent templates, not very DRY but works. I'll probably patch compress so that it checks for a LABJS = True, with a LABJS template tag that I can wrap around compress tags. Maybe it'd be too specific, but I can tell you it made such a huge difference in our app that it's probably worth it :)

[ashwoods]

@peterbe: I've cleaned up the code (still very dirty though), reused some compressor code and made this: https://github.com/ashwoods/django-labjs . It could be easily integrated into compressor, but I agree with you that compressor should just concentrate on compressing. I'll take a look into adding yepnode support next.

These tags support having compress tags in them, at least when using on-the-fly compression (only one I tested until now). Please feel free to experiment.

[ashwoods]

At least on my tests it's working awesomely, and in the app I am working on now the change is very perceptible (no more flashing). :D

[jezdez]

Nice, closing.. thanks all!

[ntucker]

So.... I don't want to load a complex JS library just to get a defer attribute set. Seems like the principal of configurability should apply to allowing me to set individual scripts to defer (or async).

Is there another solution, or can this be reopened?

[diox]

Re-opening because I agree with @ntucker : compressor should support those attributes as they are more and more commonplace and useful nowadays (not everyone uses a script loader)

I'd love to have this work in compressor the way it was described in @peterbe comment above: if the original <script> tags have defer/async attributes, add them to the result as well, similar to what we do for media attribute for css. I'll be glad to review any pull request implementing this.

[victorpoluceno]

+1

[skeet70]

+1

[rubik]

+1! Any updates on this?

[voronind]

+1

[regisec]

+1

[jpiabrantes]

+1

[BertrandBordage]

👍
As a workaround, you can still override compressor/templates/compressor/js_file.html if you always use async/defer.

[thobryan]

+1 should be fantastic to have defer implemented

[GermanoGuerrini]

+1 for the solution depicted by diox

[hkpeprah]

+1

[davecranwell]

+1

[jpatel3]

+1

[prikhi]

I'd like to add this info to the docs, is Usage -> Examples an OK place?

[diox]

@prikhi : sure, that'd be great.