我的任务是解决一个简单的问题，由于生产非常接近，因此需要细致的处理。我们有一个网站没有调用良好的 bundle 和 css 结构。有一些包，但有相当多的 View 在“head”部分引用 css 文件。我有 3 个选择:
1) 保持原样 --该应用程序运行良好并且是内部的，因此微性能调整不是什么大问题 2)为每个 View 创建包，以便我们减少对每个页面的请求 -- 仍然会有多个 bundle，但至少每个页面不会发出超过一个 css bundle 请求 3)重做所有的CSS来制作一个包 --这在这一点上是不太可能的，因为肯定会有多个类和元素冲突
我倾向于选项 2 的方向，因为它风险低并提供一些好处。然而，我对如何处理在某些 View 之间共享但不在站点范围内共享的 css 感到困惑。例如，仅用于创建页面的 createlayout.css(在一个 50ish 页面的应用程序中大约有 5 个页面)。我会在每个创建页面包中复制这个 css 吗？
这里是一些代码的例子:
_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>
我们的页面通常是这样的:
@{
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>
这是我对如何更改它的想法(选项 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>
bundleconfig.cs 中的包看起来像这样:
bundles.Add(new StyleBundle("~/Content/Beta").Include("~/Content/shared.css").Include("~/Content/betabase.css").Include("~/Content/betanew.css"));
但是，现在假设我有另一个页面，我们称之为 Alpha，它看起来像这样:
@{
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>
Alpha 的包在 bundleconfig.cs 中看起来像这样:
bundles.Add(new StyleBundle("~/Content/Alpha").Include("~/Content/shared.css").Include("~/Content/alphabase.css").Include("~/Content/alphanew.css"));
我担心的是我需要在两个包中都包含 shared.css。现在，假设我们再添加 40 个页面，但它们都没有使用 shared.css，将其放入 prehead.css 没有多大意义。此外，在某些 View 中，shared.css 可能必须位于该 View 中的另一个 css 之后，因此移动它会增加风险。
我知道这并不理想，但这是我现在的手。我真的想确定将相同的 css 文件放入两个不同的包中是否不好，以及每个 View 是否有一个包也是好还是坏。任何见解都会很棒，我很难获得任何有值(value)的信息，而且我确实有一个测试元素，但数据不是很确定(我的文件非常小，我在本地运行，调试=假)。
最佳答案
A Web Essentials bundle file is a recipe for grouping, and usually compressing, a set of files of the same type to limit the number and the amout the data to be downloaded by the browser.
Web Essentials offers two bundling types:
.bundle : for CSS and JS files For CSS, it outputs a XML bundle recipe file, a destination CSS file and a minified version of source if you turn on the minify optionon the recipe.
For JavaScript files, it outputs a destination JS file, a minified version of sources and a source-map of that min. .sprite : for images (PNG, JPG and GIF). It generates a sprite image, CSS with example code for all the possible coordinates inbackground property, LESS and SASS files with mixins holding the same background properties and a custom map file (JSON) with all those coordinates.
如何打包？
The procedure to create a bundle is the same for all types of files.
On the Solution Explorer, select files that you want to bundle together. On the Web Essentials context menu, pick Create image sprite... or Create CSS/JS bundle file depending on your context. Specify a name for the bundle file.
或者您可以使用 Dynamic Bundles也是。
using System.Web.Optimization;
namespace YourAppNameHere
{
public class MvcApplication : System.Web.HttpApplication
{
private enum bundleTypes
{
Bundle,
ScriptBundle,
StyleBundle
};
void Application_BeginRequest(Object sender, EventArgs e)
{
ParseDynamicBundle();
}
private void ParseDynamicBundle()
{
string[] pathParts = Request.FilePath.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries);
string fileChain = Request.QueryString["files"];
if (pathParts.Length < 2 || fileChain == "")
return;
string bundleType = pathParts[0];
if (!Enum.GetNames(typeof(bundleTypes)).Contains(bundleType))
return;
string bundleName = pathParts[1];
string bundleFolder = "";
Bundle bundle = new Bundle("~/" + bundleType + "/" + bundleName);
if (bundleType == bundleTypes.ScriptBundle.ToString())
{
bundleFolder = "Scripts/";
bundle = new ScriptBundle("~/" + bundleType + "/" + bundleName);
}
else if (bundleType == bundleTypes.StyleBundle.ToString())
{
bundleFolder = "Styles/";
bundle = new StyleBundle("~/" + bundleType + "/" + bundleName);
}
foreach (string fileName in fileChain.Split(','))
{
bundle.Include("~/" + bundleFolder + fileName);
}
BundleTable.Bundles.Add(bundle);
}
}
}
关于c# - 如何 bundle 在 MVC4 中的某些 View 之间共享的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27281237/