The folder convention supported in the FileBundleHandler lets you reference a folder instead of just a file. Both the HTTP handler and the
BundleHelper.InsertFile understand when a folder is referenced and automatically bundles all the .js or .css files to a single response. So in order to bundle all the files in a given folder, simply reference the folder name and add the extension of
the types of files you want bundled. Having the folder structure above, you can add a bundle like so:

Notice that the file /scripts/common.js doesn’t exist, but the folder
/scripts/common does. By adding .js at the end, we tell the HTTP handler to look for all files with the same file extension – in this case .js files.

It bundles all the files in alphabetical order and serve the as a single response.

For security reasons, the HTTP handler will only serve .css and .js extensions.

I have tried using this code in the post above in BE 2.0 could not get it to work.

The .css and .js handlers are embedded in multi-able locations within BE 2.0.

One thing that needs to be watched out for (by testing) is making sure that pre-minified files still work when they are bundled together. I've seen problems where if you try to either minify a pre-minified file, it can lead to errors, and sometimes
when you combine scripts you need to preface each script with a semi-colon in case the previous script did not end with a semi-colon. Little things like this that just need to be tested.

I haven't tried using the one from Mads or another one with the BE scripts/stylesheets, but I agree we should do that. For the JavaScripts, a large number of them are coming from the SyntaxHighlighter.

One thing that needs to be addresses for the script combining to work well is that we currently have a single process in the BE Core that outputs/injects the scripts in the Scripts folder. But then extensions like the SyntaxHighlighter and MediaElementsExtension
(maybe others) are injecting their scripts by themselves into the page without using the existing process in the BE core. So in order to really get this working well, I think these extensions need to call this existing function in the BE core to have
their scripts injected, and probably allow all extensions and code to "register" their scripts with the BE core function ... and then at the end (maybe PreRender), the BE core can take all those scripts, combine them and inject them as a single <script>
tag.

There's a couple of related functions in the BE core for this. The main one I think is AddFolderJavaScripts() in Utils.cs.

CDNs are good -- without question. However, combining without using a CDN might be more efficient. For example, let's say we have (a) jQuery, (b) jQuery Validate, (c) Syntax Highlighter that are scripts used by BE, and lets say there is a CDN
URL for each of these 3 items. If we used the CDN, that would be 3 <script> tags -- one <script> tag for each CDN script. However, if we combined all these scripts within the blog, we could reduce this down to one <script> tag.
One of the things we're trying to accomplish here is reduce the number of <script> tags by combining. The CDNs don't really help with that. They help with helping to ensure that when someone gets to your site, they might already have the
script cached in their browser since they've been to another site that is also using the same CDN.

In our case, as I mentioned before, one of the main culprits is the Syntax Highlighter which looks like it has 8 separate <script> tags and 3 <style> tags. Plus we have a few other <script> tags where there is probably not a CDN available
-- for example, jquery.cookie.js, json2.js, jquery-templates.js.

An ideal solution might be a combination of CDN and combining. CDN could be used for jQuery and other scripts where a CDN is available, and BE could combine the other scripts to produce a single <script> tag.

An ideal solution might be a combination of CDN and combining. CDN could be used for jQuery and other scripts where a CDN is available, and BE could combine the other scripts to produce a single <script> tag.

Sounds good :)

Any tips on how to combine the .js and .css files for BE 2.0 ?

I have a site that I am trying to speed up and not planning on upgrading to BE 2.5 anytime soon.

I'm planning to look into using squisher library after 2.5 released, preferably for all compression needs. Should simplify things a little bit. If I remember correctly, we used to compress js but ran into lots of issues and eventually dropped it.

You can try using it with 2.0 too: http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

And SyntaxHighlighter can be autoloaded which if I understand it correctly suppose to load only brushes needed for any given page. Also on to-do list :)

combining is a great idea, but is it also possible to tell blog engine not to reference those jquery, jquery.cookie, jquery.validate, jquery.template and json2.js. I have been working on a minimalist theme and it doesnt use any of those javascripts. Having
an idea to turn it off would definitely be a good idea. But it should reference it in admin pages.

i'm not sure why jquery is needed for blog engine, but i guess it is for editing widgets and so on. so it might be best if BE would reference jquery and other js only if we are logged in as admin/editor. For anonymous users it wouldn't make any sense to
download unnecessary javascript files.

and also an option to disable adding global.css. Coz i override everything using site.css from my theme.

+1 for SquishIt. The only problem is it doesn't support gzip/deflate out of the box.