What is the best method to reduce the size of my Javascript and CSS files?

Question

When working with large and/or many Javascript and CSS files, what\'s the best way to reduce the file sizes?

Answer 1

Dojo Shrinksafe is a Javascript compressor that uses a real JS interpreter, so it won't break your code. The other ones can work well, but Shrinksafe is a good one to use in a build script, since you shouldn't have to re-test the compressed script.

Answer 2

YUI Compressor does a pretty good job at compressing both Javascript and CSS.

Answer 3

Here are the online tools by which you can do this:-

• For minifying java script codes, you can use Javascript Online Minifier Tool. This is currently best js minifier/un-minifiers

• For minifying css codes, you can use CSS Minifier/Minify Tool. This is currently best css minifier/un-minifiers

Above are the tools which I seems to be useful for you.

Answer 4

CssTidy is the best CSS optimizer of which I am aware. It (configurably) strips comments, eliminates whitespaces, rewrites to use the many shorthand rules nickf mentioned, etc. Compressing the result helps too, as others have mentioned.

The compression ratio can be fairly dramatic, and it frees you to comment your CSS extensively without worrying about the file size.

Unfortunately, this level of preprocessing interacts with some of the popular "css hacks" in unpredictable (or predictable but undesired) ways. Some work, some don't, and some require configuration settings which reduce the level of compression for other things (especially comments).

Answer 5

Shrinksafe may help: http://shrinksafe.dojotoolkit.org/ We're using it and it does a pretty good job. We execute it from an ant build for when packaging our web app.

Answer 6

Helping the YUI Compressor gives some good advice on how you can tweak your scripts to achieve even better savings.