Use jsUglify and have source maps!

[benrudolph]

@biyeun this switches compressor to use uglifyjs as the compressor. i imagine there might be some path issues on deploy with uglifier which shouldn't be too hard to figure out once i give it a go on staging. this should "just work". here's the output of the staticfiles dir:

one step closer to better javascript error reporting!! 🏃

edit (more context): the original JS compressor didn't provide source maps. this is useful so we can get real numbers of where things broke in the javascript. this change uses a custom filter that basically just calls uglify on each of the concatenated content. uglify comes with options to add source maps. this also gives us more control of how we do our compression in general. though i'm still skeptical that this'll work completely because we concat all the files first so the lines are still messed up 😞 one thing we could do is save the uncompressed version along side the compressed version as like [hex].uncompressed.js. that way if we ever do error reporting and want to have "code context" we can pull from that. open to ideas

[benrudolph]

buddy: @czue

[czue]

will leave this one for @biyeun and the experts in @dimagi/js-team

[esoergel]

Just did some quick googling hoping to find something that maps to the original sources and found a good blog post on the topic: https://roverdotcom.github.io/blog/2014/05/28/javascript-error-reporting-with-source-maps-in-django/ Then I realized that's where this came from. Oh well. Did you see "Gotchyas" bit at the bottom? Does that just mean that we won't have source maps for compressed inline js? (probably fine).

There's also an issue on the django-compressor repo related to source map support.

[biyeun]

@esoergel we shouldn't be compressing any inline js because if js is inline it probably wants access to template vars, and compressor will have none of that

[biyeun]

@benrudolph what's the merge plan for this? looks good, but assume you want to test on staging a bit?

[benrudolph]

@esoergel yep that's where i looked as well. i did step through all the code and made sure i understood each part. the gotchas don't affect us since we don't compress inline js anyways (our tests specifically forbids it). i did see that issue, but i feel like it's better just to get moving on it. i honestly kind of like having more transparency into how the javascript is being compressed.

@biyeun yep going to test sometime this week

[benrudolph]

nice this works!

prod:

staging:

[benrudolph]

(notice how there's an extra folder available in the staging web panel that gets all the source)

[benrudolph]

✅ installed uglify-js on all servers (except swiss couldn't connect to that one, but don't think anyone is planning on deploying that until nick gets back. it'd be safe failure anyways)

[benrudolph]

@dimagi/js-team anyone want to go over this with me so we can get it merged?

[dannyroberts]

Hey @benrudolph yeah I'd love to

[dimagimon]

E501 line too long (119 > 115 characters)

[benrudolph]

🔍 📄.js

[millerdev]

🍠