Better JavaScript Minification

by Nicholas C. Zakas

21 Reader Comments

Back to the Article
  1. When comparing YUI compressor with google closure compiler, the last one can achieve better results: http://www.bloggingdeveloper.com/post/Closure-Compiler-vs-YUI-Compressor-Comparing-the-Javascript-Compression-Tools.aspx
    Copy & paste the code below to embed this comment.
  2. That is partially true. The Closure Compiler can result in smaller code by manipulating the underlying code structure, but it doesn’t do safe variable name replacement. In the presence of eval(), you could end up with broken code as it doesn’t turn variable replacement off. It also performs other optimizations that may result in unintended changes to your code’s functionality. While it shows promise, I’m not ready to recommend the Closure Compiler over the YUI Compressor.
    Copy & paste the code below to embed this comment.
  3. 1.  eval and with are JavaScript features you should *generally* avoid.  This is regardless of whether you are using any minification tool.  Minification is quite possibly the *least* of the reasons why eval and with are evil. 2.  The following practices are similar to eval, and should be avoided for the same reasons:
    - using the Function constructor
    - passing strings to window.setTimeout or window.setInterval “why with is evil”:http://www.yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/ and “why eval is evil”:http://xkr.us/js/eval
    Copy & paste the code below to embed this comment.
  4. Really nice article Nicholas. I can’t really get into the details of the usage of eval and with but i can easily say that, not only in Javascript but with any language you write your code in, optimizing the code is something any developer should do :)
    Copy & paste the code below to embed this comment.
  5. I can see some issues as well with the usage of eval and with, but i still concur that you have to minify your javascript somehow. It’s just a matter of choice imho. Nice article.
    Copy & paste the code below to embed this comment.
  6. Thanks for the comments, everyone. Just to clarify: the point of the article was not to simply say “avoid doing this,” but rather to give a clear description of *why* to avoid doing this (as I think everyone has heard “don’t use eval” and “don’t use with”, but rarely is there a nice description of why).
    Copy & paste the code below to embed this comment.
  7. Fantastic article and a great eye-opener. However, when most of the internet-using world could be on lightning fast connections within half a decade, is it still going to be such a huge deal to save a couple of kb here and there?
    Copy & paste the code below to embed this comment.
  8. Having smaller files and your website downoading faster can have SEO benefits, and this is meant to be more apparent since the Google Caffeine update, so keeping your code as lightweight as possible could be very useful in terms of ranking plus it could help with improving user experience. However I think it is always good to try and do things in the best possible manner.
    Copy & paste the code below to embed this comment.
  9. Keep in mind that lightning-fast connections are still bound by physical distance. The further the bytes have to travel, the longer it will take to get there, so if I request a byte from China it takes longer to receive than if I request that same byte from next door. Also, developing countries don’t have as much high speed internet penetration as the United States. There is still a significant portion of the world that accesses the internet over modem (or equivalent).
    Copy & paste the code below to embed this comment.
  10. No serious coder (most of the people that would be reading this article) has used either eval or with since the stone age. Reasons: # They introduce security vulnerabilities
    # They are slow _aside from compression_
    # They are difficult to debug One more reason is hardly worth an alistapart article, IMO. That being said, it was very well written.
    Copy & paste the code below to embed this comment.
  11. @Joss internet connections may be getting faster but there’s two very good reasons why you should be concerned with these sort of code optimisations: # Access to the Internet via mobiles is increasing at a much faster rate than for desktops, and file size is still a concern for most, not only in how long you have to wait, but in how much you have to pay.
    # Google has just announced that page speed will be included in their algorithm for search results, so page optimisation will also be an SEO factor.
    Copy & paste the code below to embed this comment.
  12. @Aaron - You would be surprised. There are definitely people still using “with”, but moreso eval(). Since JSON became popular, and native JSON parsing has only recently been introduced, most JavaScript libraries used eval(), and as such, didn’t get the best compression of their code.
    Copy & paste the code below to embed this comment.
  13. @Tasarım - bq. optimizing the code is something any developer should do I can’t agree with this—any developer should _be able_ to optimise code, but only when it is shown to be necessary. I completely agree with aaron and dsevil re the reasons not to use eval and with, but any kind of optimisation that reduces code readability/maintainability (and most do) should only be used when it has been proved that it is _essential_.
    Copy & paste the code below to embed this comment.
  14. The compressed code is not debuggable anymore, since all of it is in 1 line (JavaScript Error messages tell only the line number on which the error occurred). Google’s Closure Compiler has another problem in its maximum compression mode: it cannot recognize instances or properties which are dynamically addressed. Since Closure compiler does not detect its use, it will treat the instance/property as unused and remove its definition from the code. More than that, the code is not readable anymore without the use of some source beautifier or unpacker. In some cases, the minification leads to bigger compressed files - especially if one replaces window or document with a shorthand, because those cannot be compressed much further. BTW, it helps to keep the memory footprint of your JS small even without compression. Since there is a lack for very small Toolkits, it started one myself: http://tinyjs.sf.net - in the next version, I want to remove those selectors which are not very useful in normal cases to an external plugin.
    Copy & paste the code below to embed this comment.
  15. Very nice article. Some extremely good points.
    Copy & paste the code below to embed this comment.
  16. very nice and interesting article Nicholas - and thanks for telling us why not to use eval and with!
    Copy & paste the code below to embed this comment.
  17. This is just my two cents, but really, I’m surprised by how much this “minification/optimization makes debugging harder” argument still comes up. A simple one step build process which takes your CSS and JS and minifies/optimizes it isn’t that hard to come up with. I use a little Ruby script for that but you can even do it by hand! Just make sure you are using an scm tool like Git (in case you screw something up) and also that you have separate development and staging directories.
    Copy & paste the code below to embed this comment.
  18. @Thiago - You’re definitely not the only one. There’s actually a chapter in my latest book, High Performance JavaScript, that covers this very topic.
    Copy & paste the code below to embed this comment.
  19. As someone who is going to school for Graphic Design/Website Design. This is one of those articles that teaches you something that they don’t teach in school. This is something i’ll certainly keep in mind, when using JS. :-)
    Copy & paste the code below to embed this comment.
  20. Thanks for sharing these tips about boosting YUI compressor ratio.
    I already try to never use eval or with statement, and I will continue !
    Copy & paste the code below to embed this comment.
  21. I recommend this site for anyone who likes playing in the bingo hall but likes online aswell!bingo is very crazy and popular game.It is a game of chance in which each player has one or more cards printed with differently numbered squares on which to place markers when the respective numbers are drawn and announced by a caller.I like to play bingo online….http://www.888enjoy.eu..
    Copy & paste the code below to embed this comment.