This problem was caused by chrome data-compression (https://developer.chrome.com/multidevice/data-compression.) Thank to Slaks for the heads up, or I would have missed it.
Once I turned it off - it's in Chrome Settings - Reduce data usage (after Content Settings and before About Chrome), my site began to work again.
In order to fix it for other users who like me are not even aware that they are using this,
I added the following code, that I found in the two references below:
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "no-transform,public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
</FilesMatch>
The important part is telling Google "no-transform" on the javascript via the Cache-Control directive. I did this for both .js and .css files, though I might add additional types in the future.
And, I added headers.load to mods-available to that it would have mod_headers.
http://mobiforge.com/design-development/setting-http-headers-advise-transcoding-proxies
Apache -Caching: How to Configure Response headers in Apache 2+.
After restarting Apache, everything worked fine.
In terms of the 3rd question, is there a workaround for the javascript heredoc method, I don't really have an answer, but perhaps this scenario is indicative that this method is not without problems.