I have been tasked with a simple problem that requires a delicate touch since production is very close. We have a web site that didn't invoke good bundling and css structure. There are some bundles, but there are quite a few views that reference css files in the "head" section. I have 3 options:
1) Leave everything the way it is --The app works fine and it is internal so micro-performance tweaks aren't a huge deal 2) Create bundles for each view so that we reduce the requests for each page --There would still be multiple bundles, but at least each page wouldn't make more than one css bundle request 3) Redo all the css to make one bundle --This is pretty unlikely at this point as there is bound to be multiple class and element conflicts
I am leaning in the direction of Option 2 since it would be low risk and provide some benefit. I am perplexed, however, on how to handle css that is shared amongst some views but not site wide. For example, a createlayout.css that is only used for create pages (about 5 pages in a 50ish page app). Would I duplicate this css in each create page bundle?
Here is an example of some code:
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/PreHead")
@RenderSection("head", required: false)
@Styles.Render("~/Content/PostHead")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@Html.ActionLink("Check the Alpha Path","Alpha","Home")
@Html.ActionLink("Check the Beta Path","Beta","Home")
@Html.ActionLink("Check the Omega Path","Omega","Home")
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
This is how our pages generally look:
@{
ViewBag.Title = "Beta";
}
@section head
{
<link href="~/Content/shared.css" rel="stylesheet" />
<link href="~/Content/betabase.css" rel="stylesheet" />
<link href="~/Content/betanew.css" rel="stylesheet" />
}
<h2>Beta</h2>
<p>This renders the bundle for beta in the head section</p>
<div class="preheadbase">Prehead base gives a red border</div>
<div class="preheadnew">Prehead new gives an orange border</div>
<div class="betabase">Beta base gives a yellow border</div>
<div class="betanew">Beta new gives a grey border</div>
<div class="postheadbase">Posthead base gives a blue border</div>
<div class="postheadnew">Posthead new gives a cyan border</div>
<div class="mydiv">This is what comes out</div>
And this is my thought on how to change it (Option 2):
@{
ViewBag.Title = "Beta";
}
@section head
{
@Styles.Render("~/Content/Beta")
}
<h2>Beta</h2>
<p>This renders the bundle for beta in the head section</p>
<div class="preheadbase">Prehead base gives a red border</div>
<div class="preheadnew">Prehead new gives an orange border</div>
<div class="betabase">Beta base gives a yellow border</div>
<div class="betanew">Beta new gives a grey border</div>
<div class="postheadbase">Posthead base gives a blue border</div>
<div class="postheadnew">Posthead new gives a cyan border</div>
<div class="mydiv">This is what comes out</div>
And the bundle, in bundleconfig.cs would looke something like this:
bundles.Add(new StyleBundle("~/Content/Beta").Include("~/Content/shared.css").Include("~/Content/betabase.css").Include("~/Content/betanew.css"));
But, now let's say i have another page, we'll call it Alpha, it would look like this:
@{
ViewBag.Title = "Alpha";
}
@section head
{
@Styles.Render("~/Content/Alpha")
}
<h2>Alpha</h2>
<p>This renders the bundle for Alpha in the head section</p>
<div class="preheadbase">Prehead base gives a red border</div>
<div class="preheadnew">Prehead new gives an orange border</div>
<div class="alphabase">Alpha base gives a yellowgreen border</div>
<div class="alphanew">Alpha new gives a black border</div>
<div class="postheadbase">Posthead base gives a blue border</div>
<div class="postheadnew">Posthead new gives a cyan border</div>
<div class="mydiv">This is what comes out</div>
And Alpha's bundle, in bundleconfig.cs, would look like this:
bundles.Add(new StyleBundle("~/Content/Alpha").Include("~/Content/shared.css").Include("~/Content/alphabase.css").Include("~/Content/alphanew.css"));
My concern is that I need to include shared.css in both of the bundles. Now, let's say we add another 40 pages, but none of them use shared.css, it wouldn't make much sense to put it into the prehead.css. Additionally, in some of the views, shared.css might have to come after another css in that view, so moving it would add risk.
I know this isn't ideal, but this is the hand I have right now. I'm really trying to determine if putting the same css file into two different bundles is bad or not and if having a bundle per view is also good or bad. Any insight would be great, I've had some great difficulty getting any valuable information on this and I do have a test project, but the data isn't very conclusive (my files are very small and I'm running locally, with debug=false).
