How to compress javascript in realtime?

Question

I was wondering if there was a way to compress javascript in realtime, much like gzip works for HTML (and CSS apparently)?

I don't want to have to compress my file manually before upload everytime, I want the server to do it for me without any added work from lazy coders.

Answer 1

gzip works on all text, including JavaScript

If you want to do more compression (e.g. by using YUI compressor before gzipping) then you could get your server to do it, but it would be easier to do it before uploading.

The trick is to automate the build and publish process — so you run a script that does the compression then uploads the result, rather then drag'n'dropping files manually or similar.

Answer 2

I suggest that you write a small script that uploads the file automatically; then you can compress it before the upload.

The other option is to tell your web server to compress files before transfer (but it should do that automatically).

Another option is a cron job (see cron(1) or the Windows scheduler) on the server which checks the file periodically (say once a day) and compresses it when a new version has been uploaded.

Answer 3

On Apache, this compresses everything except images:

<IfModule mod_deflate.c>

# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

Answer 4

If you mean "compress" as in "maintain the code in exactly the same format but push it down the pipe compressed", then enable gzip compression as per the instructions for your server, which you haven't specified in the tags/question.

If you mean "compress" as in "minify the code", then there are options that you can try, like including a minification module/process in the pipeline. I've, very recently, created a solution in ASP.net that uses the Microsoft Ajax Minifier 4.0 to minify javascript files requested, on the fly basically by adding script tags to the page with a src tag that is similar to minifier.ashx?source=my/javascript/file/and/path/here.js and using the Minifier class in AjaxMin.dll to minify the code on demand. This has several advantages over pre-minification:

1. You can pass a flag into your live site, via a cookie, a querystring value, a given username, to disable minification which makes debugging that little bit easier if you need to resolve the issue "on live"
2. You can make emergency changes to your live code without having to change your unminified code, minify it, upload it (obviously not something you should do regularly, but it's nice that the ability is there, if needs be).
3. There's one less set of build artifacts (the minified js files) to worry about keeping track of, source-controlling, etc,..

Dis-advantages:

1. The minification adds some overhead to script requests. This can be mitigated by either caching the minification result in memory or on disk
2. I'm not sure if the license for AjaxMin.dll permits this kind of use
3. If you're using Visual Studio / another tool that provides intellisense for script, it may not now be able to give you that from your script tags