如何在MVC 4中正确地捆绑样式和脚本

本文关键字：样式 脚本 正确地 MVC | 更新日期: 2023-09-27 18:27:22

尽管我很喜欢MVC，但我不理解绑定。我阅读了几篇关于捆绑的文档，但直到现在我才发现如何将其用于我的脚本和样式的一般概念。

经过数小时的尝试和错误后，唯一能持续工作的解决方案是：

  1. 为脚本x.js创建捆绑包，相对路径a/b/c为：

    var bundle = new ScriptBundle("~/a/b/c/bundle").Include("~/a/b/c/x.js");
bundles.Add(bundle);

  2. 为样式x.css创建捆绑包，相对路径a/b/c为：

    var bundle = new StyleBundle("~/a/b/c/bundle").Include("~/a/b/c/x.css");
bundles.Add(bundle);

并在视图中将其引用为

@Scripts.Render("~/a/b/c/bundle");
@Styles.Render(("~/a/b/c/bundle");

显然，缺点是，对于每个路径，我都需要一个单独的bundle，其中包含一个构造为"path"+后缀的键（我使用"bundle"，但其他一切都可以）。

我的路径看起来是：

  • 内容''

    • 日历''
    • 日期选取器''
    • JqGrid''
    • 模板''
      • Font真棒''

  • 脚本

    • DayPilot
    • jqGrid
    • jqPlot

有没有什么聪明的方法/最佳实践来创建和使用捆绑包或组织脚本和样式的路径？

评论：我不认为这个问题是如何在mvc 4-asp.net中捆绑和渲染脚本的重复？也当标题相当相似。

如何在MVC 4中正确地捆绑样式和脚本

捆绑和缩小通过减少对服务器的请求数量和减少所请求资产（如CSS和JavaScript）的大小来提高加载时间。您可以为所有CSS创建一个单独的捆绑包，但将与供应商相关的内容和自定义内容单独分组，可以提高可管理性。捆绑包被视为单个CSS/Javascript文件，需要一个请求，尽管加载所需的时间会增加。为了减少加载时间，可以考虑通过添加以下来缩小捆绑包内容

BundleTable.EnableOptimizations = true;

在您的捆绑包注册方法中。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));    
    BundleTable.EnableOptimizations = true;
}

将CDN用于Jquery和其他标准CSS/Javascript是一种很好的方法，因为内容从不同的服务器并行加载。

http://www.asp.net/mvc/overview/performance/bundling-and-minification

相关文章：