8 ms·
Javascript minification seems like a classic case of premature optimization. I'm not a front-end developer so maybe I'm missing something, but wouldn't simple,
by mapgrep 11y ago
Javascript minification seems like a classic case of premature optimization. I'm not a front-end developer so maybe I'm missing something, but wouldn't simple, transparent gzip compression via your webserver — one line in a config file — get you something like ~90% of the benefits of minification, for free?
I'm sure there are some additional gains to be made from knowing the syntactical structure of the language you're minifying, since no generic compression scheme can know that. But that seems really marginal — and, as the article in question shows, opens up potential security vulns.
- vcarl 11y agoPart of the benefit of minifying is obfuscating the code, the only way to strip out all meaning is to have a minifier that understands the syntax.
- antris 11y agoI'm a front-end developer and you are absolutely right.
- moreInfo1234 11y agoI've worked on embedded systems with tight resource constraints. Minification was used on those systems because the space savings resulted in performance improvements. Deminification would be less of a security concern than potential issues being introduced by minification.
- IanCal 11y agoI remember having to do this with AS2 systems, short variable names were faster.
- redcalx 11y agoMinified js doesn't need decompressing whereas gzip would, but I'll admit it's probably a minuscule amount of CPU even on a smartphone, especially if you cache the decompressed version.
- klowner 11y agoIIRC, pre-SP2 IE6 didn't handle gzipped javascript properly, but those days are behind us.
- dahart 11y agoIt depends on why you're minifying, but there are good reasons to do so. I'd bet, as in guess/speculate without evidence, that the #1 reason people do it is for code obfuscation. Front end JavaScript delivers source code to your users and competitors alike, that can be scary when you're working hard on something you think people will like & copy. Most here are talking about uglify which does very superficial minimization, but Google's closure compiler is in the mix too, and that provides static type checking, nested variable flattening, dead code removal, inlining optimizations, and more. These things are substantial, not marginal, especially the static type checking. It's closer to C++ compilation than it is to gzip. Gzip can be used (and usually is) either way, and generally still has some benefit even on minified code. But no, gzip can't replace or provide the majority benefit of a minification pass, they're two mostly independent things done for mostly different reasons.
- qCOVET 11y agoI don't know if you could hide it from competition - it can be unminified ex with: http://jsbeautifier.org/ http://jsbeautifier.org/ I have tried this before and it worked.
- emidln 11y agoGoogle Chrome also does this out of the box (and has for awhile).
- leeoniya 11y agoit depends on how you minify. if you use Closure Compiler in Advanced mode it will rename and rescope pretty much everything except native methods and strings (making lots of globals cause it assumes you're compiling all page's code at once), it will eliminate unused code even from third party libs like jquery and do all sorts of stuff that make the beautified code very expensive to understand, follow and reverse and even then you may end up with only half a library that does only one specific task and the rest of the code would be missing. you have to do a bit of JSDoc annotations in some places to fix some breakages and restructure the code a tiny bit to get it to rename absolutely everything but the results are excellent.
- Touche 11y ago10% can be a lot. We have plenty of data that conversions go down as page loads take longer, even by tiny amounts that you wouldn't expect to have an effect.
- ianstallings 11y agoThe main differences are gzip doesn't strip out the documentation, and you don't need to decompress it. So in some cases the minified version would be smaller and a bit quicker. YMMV. I think it's trivial and you're right. Using gzip is easier and a bit more transparent. Related article I found: http://engineeredweb.com/blog/why-minify-javascript/ http://engineeredweb.com/blog/why-minify-javascript/
- gsnedders 11y agoYou can often get a further 10% saving on top of what you get from gzip, and many of us think a 10% saving is not to be scoffed at: not everyone has a high bandwidth connection, and many mobile users are still charged by the megabyte.
- ssttoo 11y ago"Gzipping alone gives you about 70% savings and minification alone cuts script sizes with more than half. Both combined (minifying then gzipping) can make your scripts 85% leaner." http://www.bookofspeed.com/chapter4.html http://www.bookofspeed.com/chapter4.html
- gruez 11y agoso really, minification only gets you 15% more size reduction.
- mc808 11y agoTechnically ~21% more reduction (e.g. saving 15k on top of 70k), but I suppose specific files probably deviate more than that anyway.
- ssttoo 11y agoyeah, possibly. This is old reasearch [1] with oldish minifiers (e.g. no UglifyJS) and only one script - jQuery from 5 years ago. However I don't expect large discrepancies if the reseasrch is duplicated with new modifiers and larger sample. What would be more interesting is to see the results of the different minifications. E.g. how much you get from simply removing comments and whitespace? How much if you also rename variables? There might be diminishing returns (and increased security risks) if you go further than those two simple and "safe" improvements [1] http://www.phpied.com/reducing-tpayload/ http://www.phpied.com/reducing-tpayload/
- xlm1717 11y agoIt may seem really marginal, but any time you can save downloading assets on page load is money. Everyone should be using gzip already, but minification shaves off precious milliseconds on top of that.
- chubot 11y agoExcept that your typical web site using minification is leaving hundreds or thousands of milliseconds on the table in other ways. They are minifying out of habit, not because they actually measured anything going faster. If they actually measured, then they'd be looking at the number of assets per page.
- arihant 11y agoThere are bunch of things you miss: 1. Gzip is not free. You would have to perform it on every single request. That costs money. Minification is a one time thing. 2. Gzip does not strip documentation. 3. Gzip, as you mentioned, cannot do language specific compression. So if your code is written poorly and can be better written with a closure, Gzip won't do that for you. Proper minification will. 4. Gzipping minified code is cheaper than gzipping non minified code. 5. Minified code uses lesser breadth of variable names and literals. This makes for more efficient Gzip. As others have mentioned - Gzipping gives around 50% compression, full minification around 70%, and both combined around 80-90%. So if you go whole nine yards, you can save 40% extra on bandwidth. That could equate to thousands of dollars in saving every month for even a moderately famous web app.
- justincormack 11y agoYou can pre-gzip, or cache the gzipped version; some servers do; in fact storing the gzipped version and occasionally uncompressing it for clients that cant do compression is much more efficient than the reverse as uncompressing is much faster.
- wang_li 11y agoYou can store both on disk, apache at least, will figure out if the client can handle gzipped content and will send the compressed version when possible.
- deleted 11y ago[deleted]
- icebraining 11y agoSame for nginx, using the gzip_static module: http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html http://nginx.org/en/docs/http/ngx_http_gzip_static_module.ht...
- arihant 11y agoBut doing cache in this way sort of defeats the argument. Why would one cache a gzip copy instead of minified or minified+gipped? And minified alone is more efficient than gzip and can work regardless of client preference. The argument here is why not simply use gzip and not use minification at all.
- Floegipoky 11y agoAll benefits of sending less data over the wire aside, my understanding was that a significant portion of time during page load is spent actually parsing the js, and that one of the primary benefits of minification is that it reduces this overhead for sufficiently large pages. I notice that nobody has mentioned this, am I wrong?
- nly 11y agoLook at jQuery as an example[0]. gzip only saves you 4-5% over minification alone, but combining both techniques you save a further 20%. If you're not doing both you're leaving a lot on the table. It's the same story compressing other material. 7-zip has filters to preprocess x86 and IA64 machine code to make it more amenable to LZMA, and such filters can get you a further 10-15%. [0] https://mathiasbynens.be/demo/jquery-size https://mathiasbynens.be/demo/jquery-size
- finiteloop 11y agoMinifying alone is "kind of" important, and the benefits are hard to measure precisely with the combination of gzip, http/2, and the plethora of other network optimizations. However, the more sophisticated JavaScript compilers, like Google's Closure Compiler (https://developers.google.com/closure/compiler/ https://developers.google.com/closure/compiler/) also do a lot of other compiler optimizations, like inlining functions, eliminating dead code, etc. When you are working on a large engineering team with lots of JavaScript volume written by a lot of different people, the dead code elimination alone is worth it; it means you can use one function from a library with millions of lines and your compiled JavaScript will only contain that individual function rather than many megabytes of unused code.
- chenglou 11y agoLet me present another reason for minifying that this thread doesn't seem to present. In React's codebase, we spread around lots of helpful warnings (those warnings are one of React's less spoken niceties), which goes through a processing step where `if (thisIsDev) {expensiveCheckThenWarn()}` turns into `if (false) {expensiveCheckThenWarn()}` for prod, and then the minifier guarantees to strip it out completely. For example, all the `propTypes` runtime type checking is gone in prod. Those were expensive. For React-Native for example, I've heard people going from 15fps animation to 60fps when going into prod (!). I always tell them to benchmark their animation on the prod build, because dev build is _not_ representative of the perf you get. Granted, it doesn't necessarily need to be the minifier's job. But that's the way things are currently done in JS. If the minifier provides that much more incentive for helpful error messages then I'm all for it. It has helped us avoid a huge amount of duplicate questions when people start with React too. As a matter of fact, I think most libraries should adopt this approach for this feature alone (Webpack makes this process less of a hassle, but we can do better). Otherwise you'd be caught between inserting expensive checks and not inserting them out of perf concern, which would be a true premature optimization.
- tedunangst 11y agoHow much of that 15 to 60 fps speed up can be obtained simply by setting the variable thisIsDev to false without eliding the code?
- the_watcher 11y agoYou're absolutely correct that gzip compression will, in almost all cases, get you nearly all of the speed benefits minification will, and is generally a better method (and easier to do, as well). The reason so much JS, CSS, and HTML gets minified, in my opinion, is entirely a function of Google Pagespeed Insights. Regardless of the actual speed of your site, and regardless of the presence of gzip compression, if you have unminified JS, Google will recommend minifying it. They'll give you an estimate of how much you'll save, but even if it's low, the tool is generally used by average web users (ie, not true developers) who simply take Google's advice on its face.
- tomjen3 11y agoYou can do both and get a smaller file. A smaller file is a good thing, because networks are slow to send data.
- thephyber 11y agoGZip - purely for bandwidth savings Minification - combination of bandwidth savings and smaller code Remember that Javascript on the client must run once per page load / per script inclusion. The larger the code, the more that must be parsed and executed. Minification probably had more of an impact before Chrome+V8 when JavaScript engines competed to become extremely optimized. I suppose now most vendors have some sort of in-memory cache for recent scripts feature which would vastly reduce the average script execution due to the need to parse less frequently.
- dror 11y agoYes, it's a classic case of premature optimization. * As you mentioned, you get most of the benefits from gzip compression. * You pay a major debugging penalty for having your code minified, since it's much harder to figure out what happened with minified code. * After the first request your code is going to be cached locally, anyway, so we're only talking about the initial request. * Using a CDN for your libraries will buy you much more. It's not 100% relevant, but if you're worried about download speed, this is one thing that does make sense.
- 6t6t6 11y agoPeople minify js files because they can. When you already have a pipeline like gulp or grub (and if you are developing JavaScript, you should), adding minification is just one more line of code. So, why not minify if it doesn't represent any effort and it could mean better performance? Also, usually, developers don't have access to the production webserver. Most of the time, people are to busy to analyze all the pros and cons of every action they do. Said that, if Debian is an open source OS, then yes, they should have access to the unminified code of the applications they include. Or, at least, the sourcemaps.
- tomjakubowski 11y agoAnecdotally I've heard of cases where minifying a script (running through the "uglify2" tool) led to extreme and obvious performance issues (like the UI thread freezing for several beats in cases where unminified JS did not).
- 6t6t6 11y agoIn that case, the problem doesn't happen because we are minifying the files, but because this particular implementation of the minifier has a bug. I guess...
- tomjakubowski 11y agoIn particular, it was only an issue when identifiers were mangled (i.e. made as short as possible).
- deleted 11y ago[deleted]