In my previous post Continued Education: Performance Yahoo I referred to Steve Souder' book "High Performance Web Sites".
Rule #1 is "Make fewer HTTP requests."
Now we already know that Merb is "built for speed", but generally that is considered within the context of the server side of things.
I was happy to see that Merb also allows us to follow Souder's #1 Rule for making the client side snappy too. So how does Merb allow us to make fewer HTTP requests? By dynamically combining multiple stylesheet or script files into one.
Let's see some code!
It's this simple:
We define the various CSS files we wish to be included using require_css (in this example reset.css and master.css), then by setting the :bundle => true paramenter everything will be served up in a single HTTP request in a file called all.css! Now that's pretty cool.
<% require_css :reset %>
<% require_css :master %>
<%= include_required_css :bundle => true %>
But wait there's more!
But wait there's even more!
<% require_js :foo $>
<%= include_required_js :bundle => true %>
Now what is really cool is that you don't have to place your require_css or require_js statements only in the layout. You can place those in your views or even partials.
Getting it to work
By default the bundling action should only occur when in production mode. At the moment (Merb 0.5.2) it appears there is a bug and the bundling action doesn't realize when it is in production mode - so nothing happens.
What you need to do is edit your config/merb.yml file and uncomment the line that reads:
That's it! Should work. Enjoy.
By forcing :bundle_assets to true in the merb.yml file, we are enabling this functionality for all environments instead of just for production. This isn't really ideal
Thanks to dudleyf in #merb for helping me figure this out. Thanks to codahale for writing the code for :bundle.