7

I'm getting ready to start on a new project and I'd like to know if there's a way to automatically minify JavaScript on the server side, providing caching once the JavaScript has been minified once already? I could simply write a build script to accomplish this, but it'd be nice if I could "fire-and-forget" so to speak, with automatic minification. What would be the recommended route in this scenario? Should I minify my JavaScript before it goes online at the cost of time or should I look for something that'll automatically do it for me on the serverside?

EDIT

I'll probably be using Django, but of course, JavaScript and media is served separately from the actual "HTML"/application output.

Community
  • 1
  • 1
Naftuli Kay
  • 87,710
  • 93
  • 269
  • 411

3 Answers3

7

This will all depend on what server side language you're using. It will have nothing (so much) to do with Javascript or Css, but rather PHP, .NET, Ruby, etc.

(note: these are just some quick searches I've done. I don't have any experience with any of them.)

I personally recommend NOT doing ANY of the minification / combining at run time since there is a server side performance hit that happens over and over and over again.

Above is my "Answer"

Below is my "Preference"

My preference is to use some sort of a Build Time minification / combining tool that achieves the goal once and leaves the server to just "serve".

Since I'm running Visual Studio for my IDE, my preference is to use a tool called Chirpy... the end result is a single static site.min.js file and a single static site.min.css file that has everything I need. I will no longer suffer a performance hit from combining/minifying my js/css at run time.

Edit

Be sure to read the comments below, as they help add to the overall concept of what the OP is looking for.

Edit

Also just found WebPutty, looks like a pretty slick tool.

Community
  • 1
  • 1
Chase Florell
  • 46,378
  • 57
  • 186
  • 376
  • 2
    Definitely. I didn't know that there was something available like Chirpy to roll it all into one, so that's really cool. Hopefully if I roll something like YUI and `mod_deflate` or `mod_gzip` I'll get the best performance and file size. – Naftuli Kay Jul 14 '11 at 02:06
  • However, are there any frameworks that minify __and__ cache JavaScript? (ie: first request causes the code to be minified and saved to a cache file, second request and on just pulls the cached file) – Naftuli Kay Jul 14 '11 at 02:07
  • The best way to do the caching is to have a separate domain name, and have your web server do the caching. IIS and Apache both have ways of doing this. If you look at the StackOverflow source, you'll see that all static files come from `http://cdn.sstatic.net/` - It used to NOT be a cdn... and they were still able to get good cache performance out of `http://sstatic.net`. – Chase Florell Jul 14 '11 at 02:10
  • just remember that the static domain has to be "Cookieless" which means it canNOT simply be a subdomain off of your existing domain. – Chase Florell Jul 14 '11 at 02:11
  • As an extra tid bit of info, be sure to [SPRITE](http://spriteme.org/) your images to increase performance there too. – Chase Florell Jul 14 '11 at 02:12
  • Here is some good information on cookieless domain performance: http://www.ravelrumba.com/blog/static-cookieless-domain/ – Chase Florell Jul 14 '11 at 02:13
  • @rockinthesixstring in regard to hosting static content on a separate domain, do you have any suggestions for https sites/apps? How would that work? – BZink Aug 08 '11 at 14:49
  • @BZink. I'm a strong fan of [Amazon S3](http://aws.amazon.com/s3/). Basically you sign up for a separate domain name and create a CName to point to your S3 bucket (they'll give you the domain name to use). You then send all your data from there, and can potentially have it as a CDN which will dramatically increase speed. I'm pretty sure that's what StackExchange is doing. – Chase Florell Aug 08 '11 at 17:57
1

YUI Compressor works amazingly for me, requires Java on the server and you passing it the right params:

Here is my build script I use (written in Ruby, but does not have to), it calls the compressor with the right params, thats all it does.

#
# Build JS Files
#
require 'rake/packagetask'

JAVA = 'java'
OUTPUT = 'public/js/sitel-core.js'
MINOUTPUT = 'public/js/sitel-core.min.js'
OUTCSS = 'public/css/styles.css'
MINCSS = 'public/css/styles.min.css'
WIZOUT = 'public/js/sitel-wizard.js'
WIZMIN = 'public/js/sitel-wizard.min.js'

desc "Build CSS Scripts"
task :buildcss do
    files = 'public/css/styles.css'
    `#{JAVA} -jar build/yuicompressor.jar #{OUTCSS} -o #{MINCSS}`
end

desc "Build JS Scripts"
task :build => [:buildcss] do
    files = 'public/js/sitel.js public/js/sitel/popup.js public/js/microtable.js public/js/microbox.js public/js/sitel/popup.page.js public/js/sitel/flexigrid.js public/js/flexigrid/flexigrid.js public/js/nyroModal-1.6.2/js/jquery.nyroModal-1.6.2.js public/js/help-bubble.js public/js/sitel/elgg.js'
    `cat #{files} > #{OUTPUT}`
    `#{JAVA} -jar build/yuicompressor.jar #{OUTPUT} -o #{MINOUTPUT}`    

    wizard = 'public/js/wizard2.js public/js/dual-select.js public/js/filterbox.js public/js/jquery-validate/jquery.validate.js public/js/smartsearch.js public/js/smartsearch-validator.js public/js/flexigrid/flexigrid_helper.js '
    `cat #{wizard} > #{WIZOUT}`
    `#{JAVA} -jar build/yuicompressor.jar #{WIZOUT} -o #{WIZMIN}`
end

desc "Build JS Scripts"
task :default => :build
Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
0

If you use Apache you can use this solution that serve minified js files on the fly : https://www.unixmen.com/how-to-auto-minify-javascript-files-on-page-load-in-apache-using-uglifyjs/

Tu4n3r
  • 441
  • 5
  • 10