

Ask HN: Do you recommend compressing js files to remove extra whitespace? - andrewhillman

I feel like I am using a lot of javascript on my new project and I am wondering if it's a good idea to run my JS files through a service like 'jscompress.com' to speed up execution time. 
These compression services <i>mostly</i> strip out "extra whitespace" and "comments" to speed up execution times, but compressing makes the file look messy.<p>These online compression services allow you to do a couple of things, but I am not sure which is more beneficial (if at all).<p>Option #1: Upload and combine js files to consolidate and compress.<p>Option #2: Just compress files keeping them separate.<p>If anyone has a recommendation please share. Thanks fellow hackers.
======
pilom
I'm curious why there is a problem with making "the file look messy?" Your
users will likely never look at it (unless you are building something for JS
developers) and the compression should really only be a step in your deploy
(save, compress, run tests, deploy to server). So theoretically no one should
ever look at the compressed files. That being said if you have a lot of JS it
can really improve load times of sites but thats about it.

As for the 2 options you listed, there are 2 benefits of option 1 over 2
(given that no one is ever going to look at the compressed files). First, some
JS compressors do a better job when they have all the files together as one
large file. Second, consolidating them all down to 1 file significantly
decreases the number of requests the client has to make to your server. This
reason alone will probably have a bigger impact on your sites performance than
compressing the files alone so I would definitely recommend you look into it.

~~~
andrewhillman
Well "messy" makes it harder for me to read and I prefer neat code. Do you
have any recommendations on sites that compress js files? I've noticed several
sites, but not sure if one is better than another. Thank you for your input.
It is appreciated.

~~~
polyfractal
As pilom mentioned, no one will be reading your compressed (also known as
"minified") code. Your day-to-day programming will be in a non-compressed form
of JS. When your code is release-ready, you go through the aforementioned
deployment process.

I tend to use YUIcompressor, but I don't think any of them differ much.

~~~
andrewhillman
thank you.

------
voyou
Stripping out comments and whitespace is unlikely to speed up execution
(technically, I suppose it will speed up parsing, but I wouldn't have thought
skipping comments and whitespace makes up a noticeable portion of the runtime
of most scripts). It will probably speed up download time, although the
savings might not be as large as you would expect because JavaScript can and
should be compressed by the server using gzip. Most authorities on making
pages load faster seem to recommend minifying JavaScript and combining files
where possible.

Consolidating the files reduces the number of HTTP requests the browser has to
make, which can make the page load faster because each request has some
overhead. On the other hand, JavaScript libraries can be loaded from a CDN
like <http://code.google.com/apis/libraries/> , and if you do that users may
already have a copy in their cache, whereas if you load one combined script
including a library and your own code from your own site, users won't get that
caching benefit.

Finally, debugging minified JavaScript is a serious pain, so don't minify any
JavaScript in active development, just when you are ready to move to
production.

------
chris_dcosta
Is there a particular performance issue that has lead you to ask this
question?

It's generally good practice to consolidate and minify your js files, but
don't waste time planning how you do that during your development phases.

The reason I ask if you are having performance problems or page loading
performance problems is that generally people get hung up this, and often the
code files are the least of your worries. Badly created images and many of
them can be a killer - try to look at what you can do here first.

------
c_t_montgomery
I'd use something like Grunt (<https://github.com/cowboy/grunt>) as a way to
minify & concatenate your files for deployment.

That way, you can work with a file formatted to your liking, but when
deployed, it will be optimized.

------
imx
With or without whitespace - after gzip the difference is only about 1% or so.
Bundle your js files together. Place script tag in the end of your html doc to
allow parallel downloads.

------
geuis
Yes. Who cares if your file looks "messy"? When you are delivering _any_
content to users, it should be as minimal as possible. You, as the developer,
aren't reading the compressed files. They should be compressed automatically
as part of your deployment cycle. If you don't have this automated, then
include it in your manual process. Develop normally locally, but before you
push stuff out run it through a compressor.

Also, I recommend the Google Closure compiler instead of jscompress. Just
leave it set at simple unless you are explicitly using Closure.
<http://closure-compiler.appspot.com/home>

~~~
andrewhillman
thank you

