Combining CSS and JS in Master Pages and View Pages With SquishIt

Question

How do you implement SquishIt to bundle Css/Js across View Pages and Render it in the Master page? I thought I could use a ContentPlaceHolder above the Render portion, but there seems to be some odd behavior where it sometimes adds 3 files (1 in the view page and 2 in the master page) but other times will ignore the file added from the View Page.

Index.aspx

<asp:Content ContentPlaceHolderID="CssFiles" runat="server">
    <% CssHelper.Add("home.css"); %>
</asp:Content>

Site.master

<asp:ContentPlaceHolder ID="CssFiles" runat="server" />
<% CssHelper.Add("reset.css"); %>
<% CssHelper.Add("master.css"); %>
<%=CssHelper.Render() %>

My current solution is a Static wrapper around SquishIt's static Bundle class that keeps the BundleBuilder in HttpContext.Current.Items.

I'm curious if this has been done successfully and how so.

Answer 1

I think you might be missing the point of bundling css and javascript a little bit. If you are going to be adding in css or js files on each view, in combination with the master page files, then you are creating a ton of little bundles that your user has to download each time.

If you don't have a ton (and I mean a TON) of Javascript and Css, then you are better off bundling ALL of your css and javascript into the same bundle. This way the user takes the hit of downloading it the first time and then it gets cached.

If you have a TON of css and javascript, then use the named bundle feature and create bundles for different sections of your site. But the whole point is that you want to minimize the number of bundles that you create so that the user doesn't have to keep downloading files.

The only exception to this is for mobile browsers, where they have certain size caching limitations.