SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to minify Javascript

    Hello,

    Is there any program that I can use to easily minify my scripts?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,804
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You mean a feminine version of the mickify function?

    Actually it doesn't much matter what sex your computer mouse is, they all work similarly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Use this site and you can quickly find out how to minify javascript.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would you?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What issues are there with minifying code that doesn't save bandwidth?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    What issues are there with minifying code that doesn't save bandwidth?
    I have read that sentence 10 times now, and I still can't figure out what you mean?

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Better to serve your JS files gzipped for browsers that support it and as normal text for those that don't. Minifying makes code difficult to read and that's anti-social! Also, as felgall has pointed out, it's sexist.

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kyberfabrikken View Post
    Why would you?
    To create smaller files, thus improving the performance of your site.

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Better to serve your JS files gzipped for browsers that support it and as normal text for those that don't. Minifying makes code difficult to read and that's anti-social! Also, as felgall has pointed out, it's sexist.
    Actually, it's best to do both... minify and GZIP. But this is better as part of a build process. You should still have fully commented versions of your JavaScript files for development purposes, but when you're ready to add it to your pages, use the minified version.

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoom123 View Post
    Hello,

    Is there any program that I can use to easily minify my scripts?
    You could try Douglas Crockford's JSMin:
    http://javascript.crockford.com/jsmin.html

    Or perhaps the Yahoo UI Library's Compressor:
    http://developer.yahoo.com/yui/compressor/

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, it's best to do both... minify and GZIP. But this is better as part of a build process. You should still have fully commented versions of your JavaScript files for development purposes, but when you're ready to add it to your pages, use the minified version.
    I disagree. Javascript, HTML and CSS are source code, they don't get compiled. I can understand removing very verbose comments, but I very much dislike it when I try to view a site's source code and it's difficult to read because of "minification". I think it goes againt the spirit of the web, or something like that.

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    I disagree. Javascript, HTML and CSS are source code, they don't get compiled. I can understand removing very verbose comments, but I very much dislike it when I try to view a site's source code and it's difficult to read because of "minification". I think it goes againt the spirit of the web, or something like that.
    Well, I don't know about you, but when I'm using JavaScript, I'm using it to provide the end user with the best experience. I don't give a crap if they want to look at my source code! That's not what 99% of the users are going to care about. If you really wanted to, you could put something like this in your HTML page:

    <!-- See main.js for non-minified version of this script: -->
    <script type="text/javascript" src="main-min.js"></script>

    But including non-minified script for the sake of the few users who want to "borrow" my code is just stupid. Note, I'm not talking about obfuscation! I'm talking about minimizing. I'm not trying to prevent anyone from borrowing my code, I'm trying to provide the most responsive UI to the end user, and studies have shown that most of the performance hits exist in the front-end code (scripts, etc.).

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That is the point behind gzipping your JS. There is no need to minify javascript since gzip will take care of the blank space (and compress the remaining text, making it better than just minifying) and the client will get it nice and spacey as if nothing had ever happened to it, ready for your curious visitors to take a look and learn from it.

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lets suppose you have a file that's 100k (unminified), and 40k (minified). It's going to take longer to GZIP the 100k version of the file than the 40k, and then the browser still needs to uncompress it and parse it... again, the browser is going to be working with the 100k version of the file. There is a performance hit. GZIPPING alone will not entirely remove that performance hit. For small files, this is not a big deal, but for larger files minification is a good thing.

  16. #16
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fotiman View Post
    For small files, this is not a big deal, but for larger files minification is a good thing.
    Did you measure that or are you assuming?

    Compared to the overhead of establishing a HTTP-connection, how much does the bandwidth matter to most users?

    Compared to an algorithm implemented in native code (gzip-compression), how does an ad-hoc algorithm implemented in a dynamic interpreted language perform?

    Is it better to decompress data once and then cache it, or to cache the compressed data and decompress it each time you need it?

    If something breaks and you need to find the bug, is it easier to read compressed code, than source code?

  17. #17
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, if you have 40kB of JavaScript, the time taken un-gzipping it is going to be negligible compared to the amount of time it takes to parse and do stuff with that JavaScript. And, like I said before, 40kB of gzipped JS does not equal 40kB of minified JS, the difference is going to be significant. And the difference in readability will be enormous.

  18. #18
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Fotiman. I have already seen those 2 scripts. If there is nothing simpler then I guess I have to use one of those.

    I was just wondering if there was an easy way to minify them, like uploading them to some website that would then return the minified version, or downloading a program that can do it for you.

    Jquery suggests that you use its minified version + gzip. If thats good for JQuery then I assume it should be good for all scripts.

    According to Yahoo you should minify your code if you want the best performance:
    http://developer.yahoo.com/performan...es.html#minify

    I have already setup my server so it will gzip Javascript files and now I want to minify them as well.

  19. #19
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jquery suggests that you use its minified version + gzip. If thats good for JQuery then I assume it should be good for all scripts.

    According to Yahoo you should minify your code if you want the best performance:
    I agree with those statements 100%.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •