Visual Studio 2012 条件捆绑

Posted 2023-03-06

【中文标题】Visual Studio 2012 条件捆绑

【英文标题】：Visual Studio 2012 Conditional Bundling

【发布时间】：2012-07-19 18:50:05

【问题描述】：

我刚开始使用 VS 2012 RC。我创建了一个带有母版页和单个 Web 表单的测试站点。目前，我正在使用此代码捆绑网站上的整个 Styles 文件夹：

Global.asax

BundleTable.Bundles.EnableDefaultBundles();

Site.master

<link rel="stylesheet" type="text/css" href="Styles/css" />

问题：测试网站有一个网站级 CSS 文件，用于控制网站的整体外观。除了站点级 CSS，每个页面可以有自己的 CSS 定义。是否可以在母版页中仅包含 site.css 文件，然后根据每个页面的需要有条件地将 .css 文件添加到包中？

我在Default.aspx 后面的代码中尝试了这个，但没有成功：

BundleTable.Bundles.Add(new Bundle("~/Styles/Default.css"));

【问题讨论】：

如果你只是在master中加载site.css然后是页面css文件，那你为什么要捆绑？

@TimBJames，我正在加载整个文件夹的内容。我想在母版页中仅加载站点级 CSS，然后根据需要将其他 CSS 文件与它捆绑在一起。

第一次读到这个。这不是违背捆绑的目的吗？毕竟，如果没有捆绑，您将在第一次加载时加载 site.css 和 page1.css，然后在转到第 2 页时，它只会加载第 3 页的 page2.css、page3.css 等。假设页面特定的 CSS 文件通常比一般站点小得多，通过捆绑您将在每个页面中加载不同的大文件，而在没有捆绑的情况下您将在每个页面中加载一个小文件，唯一的改进将是您需要的第一页加载 1 个文件而不是 2 个（总大小相同）

【参考方案1】：

我的建议：

转到Global.asax。确保方法Application_Start 包含以下行：

protected void Application_Start()

    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);

如下查找或创建类BundleConfig，最好在文件夹App_Start中：

public class BundleConfig

    public static void RegisterBundles(BundleCollection bundles)
    
        ...

        bundles.Add(new StyleBundle("~page1").Include(
             "~/Styles/site.css",
             "~/Styles/page1.css"));

        bundles.Add(new StyleBundle("~page2").Include(
             "~/Styles/site.css",
             "~/Styles/page2.css"));

        ...

        bundles.Add(new StyleBundle("~pageN").Include(
             "~/Styles/site.css",
             "~/Styles/pageN.css"));

    

现在在每个适当的页面中使用相应的包：

<link rel="stylesheet" type="text/css" href="Styles/page1" />

或者更好的代码：

@Styles.Render("~/Styles/page1")

（这是cshtml，但aspx 的语法肯定非常相似）。

请注意，每页必须有一个单独的捆绑包。您不应该即时修改同一个捆绑包。捆绑包具有虚拟网址。在您的示例中，它只是css。这些是由浏览器缓存的，因此无论您在什么天气下都即时更改了 bundle 的内容，浏览器可能会认为这是相同的并且不会重新获取它。

---

如果您不想将每个页面手动添加到上述方法中。你可以自动化它。以下代码可以让您了解如何：

public class MyStyleHelper

    public static string RenderPageSpecificStyle(string pagePath)
    
        var pageName = GetPageName(pagePath);
        string bundleName = EnsureBundle(pageName);
        return bundleName;
    

    public static string GetPageName(string pagePath)
    
        string pageFileName = pagePath.Substring(pagePath.LastIndexOf('/'));
        string pageNameWithoutExtension = Path.GetFileNameWithoutExtension(pageFileName);
        return pageNameWithoutExtension;
    

    public static string EnsureBundle(string pageName)
    
        var bundleName = "~/styles/" + pageName;
        var bundle = BundleTable.Bundles.GetBundleFor(bundleName);
        if (bundle == null)
        
            bundle = new StyleBundle(bundleName).Include(
                "~/styles/site.css",
                "~/styles/" + pageName + ".css");
            BundleTable.Bundles.Add(bundle);
        
        return bundleName;
    

用法：

<link rel="stylesheet" type="text/css" href="<%: MyStyleHelper.RenderPageSpecificStyle(Page.AppRelativeVirtualPath) %>" />

【讨论】：

我错了，还是您的自动化示例假设这是一个 MVC 应用程序？

嗨 James Hill，是的，我的第一个快速草稿 是 MVC。它是记事本编码的，也有一些错误。现在我将它改写成普通的 ASP 并进行了测试。它似乎运作良好。请查看我的编辑。

仅供参考 - ResolveUrl() 应添加到您的使用中。没有它就行不通。