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

[{'answer_id': 65503, 'author': 'Mark Biek', 'author_id': 305, 'author_profile': 'https://Stackoverflow.com/users/305', 'pm_score': 3, 'selected': False, 'text': '<p><a href="http://developer.yahoo.net/blog/archives/2007/07/high_performanc_8.html" rel="nofollow noreferrer">Minify</a> seems to be one of the easiest ways to shrink Javascript.</p>\n\n<p>Turning on zip at the web server level can also help.</p>\n'}, {'answer_id': 65505, 'author': 'nickf', 'author_id': 9021, 'author_profile': 'https://Stackoverflow.com/users/9021', 'pm_score': 0, 'selected': False, 'text': '<p>For javascript, I use <a href="http://dean.edwards.name/download/#packer" rel="nofollow noreferrer">Dean Edwards\'s Javascript Packer</a>. It\'s been ported to .NET, perl, php4, php5, WSH, and there\'s even an aptana plugin.</p>\n\n<p>Javascript packing comes in a few flavours - some just strip out comments and whitespace, others will change your variable names to be concise, and others, well, I don\'t even know what they do, but the output sure is small. The high-end compression works by using the eval() function, which puts some extra burden on the client, so if your scripts are particularly complicated, or you\'re designing for slower hardware, keep that in mind. the Javascript packer gives you the option for which compression level you want to use.</p>\n\n<p>For CSS, the best you can do is strip whitespace and comments. Thankfully that means that you can achieve that with a one-line function:</p>\n\n<pre><code>function compressCSS($css) {\n    return\n        preg_replace(\n            array(\'@\\s\\s+@\',\'@(\\w+:)\\s*([\\w\\s,#]+;?)@\'),\n            array(\' \',\'$1$2\'),\n            str_replace(\n                array("\\r","\\n","\\t",\' {\',\'} \',\';}\'),\n                array(\'\',\'\',\'\',\'{\',\'}\',\'}\'),\n                preg_replace(\'@/\\*[^*]*\\*+([^/][^*]*\\*+)*/@\', \'\', $css)\n            )\n        )\n    ;\n}\n</code></pre>\n\n<p>While that function and the Javascript packer will reduce the file size of individual files, to get the best performance from your site, you\'ll also want to be reducing the number of HTTP requests you make. Each Javascript and CSS file is a separate request, so combining them into one file each will the the optimal result. Instead of trying to maintain a single bohemoth JS file, you can use the program/technique I\'ve written on my blog (shameless self plug) at <a href="http://spadgos.com/?p=32" rel="nofollow noreferrer">http://spadgos.com/?p=32</a></p>\n\n<p>The program basically reads a "build script"-type file which will simultaneously combine and compress multiple Javascript and CSS files into one (of each) for you (or more, if you want). There are several options for the output and display of all files. There\'s a larger write-up there, and the source is freely available.</p>\n'}, {'answer_id': 65526, 'author': 'Michael Haren', 'author_id': 29, 'author_profile': 'https://Stackoverflow.com/users/29', 'pm_score': 3, 'selected': False, 'text': '<p>Rather than tweaking your files directly, I would recommend compressing them. Most clients support it.</p>\n\n<p>I think you\'ll find that this is easier and just as effective.</p>\n\n<p><a href="http://www.codinghorror.com/blog/archives/000059.html" rel="noreferrer">More details from Jeff\'s adventures with it</a>.</p>\n'}, {'answer_id': 65606, 'author': 'Sam Hasler', 'author_id': 2541, 'author_profile': 'https://Stackoverflow.com/users/2541', 'pm_score': 2, 'selected': False, 'text': '<p>See the question: <a href="https://stackoverflow.com/questions/28932/best-javascript-compressor">Best javascript compressor</a></p>\n\n<p>Depending on whether or not you are going to gzip your JavaScript files may change your choice of compressor. (Currently Packer isn\'t the best choice if you are also going to gzip, but see the above question for the current best answer)</p>\n'}, {'answer_id': 65613, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://shrinksafe.dojotoolkit.org/" rel="nofollow noreferrer">Dojo Shrinksafe</a> 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.</p>\n'}, {'answer_id': 66436, 'author': 'Jim', 'author_id': 8987, 'author_profile': 'https://Stackoverflow.com/users/8987', 'pm_score': 5, 'selected': True, 'text': '<p>In addition to using server side compression, using intelligent coding is the best way to keep bandwidth costs low. You can always use tools like <a href="http://dean.edwards.name/download/#packer" rel="nofollow noreferrer">Dean Edward\'s Javascript Packer</a>, but for CSS, take the time to learn <a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml" rel="nofollow noreferrer" title="CSS Shorthand Examples">CSS Shorthand</a>. E.g. use:</p>\n\n<pre class="lang-css prettyprint-override"><code>background: #fff url(image.gif) no-repeat top left;\n</code></pre>\n\n<p>...instead of:</p>\n\n<pre class="lang-css prettyprint-override"><code>background-color: #fff;\nbackground-image: url(image.gif);\nbackground-repeat: no-repeat;\nbackground-position: top left;\n</code></pre>\n\n<p>Also, use the cascading nature of CSS. For example, if you know that your site will use one font-family, define that for all elements that are in the body tag like this:</p>\n\n<pre class="lang-css prettyprint-override"><code>body{font-family:arial;}\n</code></pre>\n\n<p>One other thing that can help is including your CSS and JavaScript as files instead of inline or at the head of each page. That way your server only has to serve them once to the browser after that browser will go from cache.</p>\n\n<h3>Including Javascript</h3>\n\n<pre><code>&lt;script type="text/javascript" src="/scripts/loginChecker.js"&gt;&lt;/script&gt;\n</code></pre>\n\n<h3>Including CSS</h3>\n\n<pre><code>&lt;link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" /&gt;\n</code></pre>\n'}, {'answer_id': 66530, 'author': 'DustinB', 'author_id': 7888, 'author_profile': 'https://Stackoverflow.com/users/7888', 'pm_score': 1, 'selected': False, 'text': '<p>Shrinksafe may help: <a href="http://shrinksafe.dojotoolkit.org/" rel="nofollow noreferrer">http://shrinksafe.dojotoolkit.org/</a>  We\'re using it and it does a pretty good job. We execute it from an ant build for when packaging our web app.</p>\n'}, {'answer_id': 66554, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '<p>I\'d give a test-drive to the new runtime optimizers in ASP.Net published on <a href="http://www.codeplex.com/NCOptimizer" rel="nofollow noreferrer">http://www.codeplex.com/NCOptimizer</a></p>\n'}, {'answer_id': 66614, 'author': 'Walter Rumsby', 'author_id': 1654, 'author_profile': 'https://Stackoverflow.com/users/1654', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://yuiblog.com/blog/2008/02/11/helping-the-yui-compressor" rel="nofollow noreferrer">Helping the YUI Compressor</a> gives some good advice on how you can tweak your scripts to achieve even better savings.</p>\n'}, {'answer_id': 69745, 'author': 'Rexxars', 'author_id': 11167, 'author_profile': 'https://Stackoverflow.com/users/11167', 'pm_score': 0, 'selected': False, 'text': '<p>YUI Compressor does a pretty good job at compressing both Javascript and CSS.</p>\n'}, {'answer_id': 69839, 'author': 'Jonathan Arkell', 'author_id': 11052, 'author_profile': 'https://Stackoverflow.com/users/11052', 'pm_score': 0, 'selected': False, 'text': "<p>YUI Compressor has my vote, for the simple reason that instead of just performing regular expression transformations on the code, it actually builds a parse tree of the code, similar to a Javascript interpreter, and then compresses it that way.  It is usually very careful about how it handles the compression of identifiers.</p>\n\n<p>Additionally it has a CSS compression mode, which I haven't played with as much.</p>\n"}, {'answer_id': 76681, 'author': 'Eric  DeLabar', 'author_id': 7556, 'author_profile': 'https://Stackoverflow.com/users/7556', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://code.google.com/apis/ajaxlibs/" rel="nofollow noreferrer">Google hosts a handful of pre-compressed JavaScript library files</a> that you can include in your own site.  Not only does Google provide the bandwidth for this, but based on most browser\'s file caching algorithms, if the user has already downloaded the file from Google for another site they won\'t have to do it again for yours.  A nice little bonus for some of the 90k+ JS libraries out there.</p>\n'}, {'answer_id': 77511, 'author': 'Dave Lockhart', 'author_id': 9960, 'author_profile': 'https://Stackoverflow.com/users/9960', 'pm_score': 2, 'selected': False, 'text': '<p>Compression and minify-ing (removing whitespace) are a start.</p>\n\n<p>Additionally:</p>\n\n<ol>\n<li><p>Combine all of your JavaScript and CSS includes into a single file. That way the browser can download the source in a single request to server. Make this part of your build process.</p></li>\n<li><p>Turn caching on at the web-server level using the <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9" rel="nofollow noreferrer">cache-control</a> http header. Set the expiry to a large value (like a year) so the browser will only download the source once. To allow for future edits, include a version number on the query-string, like this:</p></li>\n</ol>\n\n<p><code>&lt;script src="my_js_file.js?1.2.0.1" type="text/javascript"&gt;&lt;/script&gt;</code></p>\n\n<p><code>&lt;link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" /&gt;</code></p>\n'}, {'answer_id': 112361, 'author': 'Rakesh Pai', 'author_id': 20089, 'author_profile': 'https://Stackoverflow.com/users/20089', 'pm_score': 2, 'selected': False, 'text': "<p>I'm surprised no one suggested gzipping your code. A straight ~50% saving there!</p>\n"}, {'answer_id': 112420, 'author': 'Doug McClean', 'author_id': 11173, 'author_profile': 'https://Stackoverflow.com/users/11173', 'pm_score': 0, 'selected': False, 'text': '<p><a href="http://csstidy.sourceforge.net/" rel="nofollow noreferrer">CssTidy</a> is the best CSS optimizer of which I am aware. It (configurably) strips comments, eliminates whitespaces, rewrites to use the many shorthand rules <a href="https://stackoverflow.com/questions/65491/what-is-the-best-method-to-reduce-the-size-of-my-javascript-and-css-files#65505">nickf mentioned</a>, etc. Compressing the result helps too, as others have mentioned.</p>\n\n<p>The compression ratio can be fairly dramatic, and it frees you to comment your CSS extensively without worrying about the file size.</p>\n\n<p>Unfortunately, this level of preprocessing interacts with some of the popular "css hacks" in unpredictable (or predictable but undesired) ways. <a href="http://csstidy.sourceforge.net/hacks.php" rel="nofollow noreferrer">Some work</a>, some don\'t, and some require configuration settings which reduce the level of compression for other things (especially comments).</p>\n'}, {'answer_id': 1007366, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '<p>Try <a href="http://www.boryi.com/html/free-tools.html" rel="nofollow noreferrer">web compressor tools from Boryi</a> to compress your standard HTML file (without Javascript code and css code embedded, but can be linked to or imported), Javascript code (properly ended with ;), and css code.</p>\n'}, {'answer_id': 34386379, 'author': 'Ken Sharp', 'author_id': 2460168, 'author_profile': 'https://Stackoverflow.com/users/2460168', 'pm_score': 0, 'selected': False, 'text': '<p>I found <a href="http://jscompress.com/" rel="nofollow">JSCompress</a> a nice way to not only minify a JavaScript, but to combine multiple scripts. Useful if you\'re only using the various scripts once. Saved 70% before compression (and something similar after compression too).</p>\n\n<p>Remember to add back in any copyright notices afterwards.</p>\n'}, {'answer_id': 53739197, 'author': 'Mohandas P G', 'author_id': 9147950, 'author_profile': 'https://Stackoverflow.com/users/9147950', 'pm_score': 2, 'selected': False, 'text': '<p>Here are the online tools by which you can do this:-</p>\n\n<ul>\n<li><p>For minifying java script codes, you can use <a href="https://www.cssminifiers.com/js-minify" rel="nofollow noreferrer">Javascript Online Minifier Tool</a>. This is currently best js minifier/un-minifiers</p></li>\n<li><p>For minifying css codes, you can use <a href="https://www.cssminifiers.com/css-minifier" rel="nofollow noreferrer">CSS Minifier/Minify Tool</a>. This is currently best css minifier/un-minifiers</p></li>\n</ul>\n\n<p>Above are the tools which I seems to be useful for you.</p>\n'}]
['https://Stackoverflow.com/questions/65491', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9021/']