Question

就像我喜欢MVC一样，我不明白捆绑。我阅读了几个关于捆绑的文档，但直到现在我才发现如何将它用于我的脚本和样式。

经过数小时的反复试验后，唯一能够始终如一的解决方案是：

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

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

为样式x.css创建包含相对路径a / b / c的包：

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

并在Views as

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

显然缺点是，对于每个路径，我需要一个带有一个密钥的捆绑，构造为“路径”+后缀（我使用“捆绑”，但其他一切也会这样做）。

我的路径看起来像：

内容\
- 日历\
- 的DatePicker \
- 的jqGrid \
- 模板\
  - FontAwesome \
- ...
脚本
- DayPilot
- 的jqGrid
- jqPlot
- ...

有没有聪明的方法/最佳实践如何创建和使用bundle或组织脚本和样式的路径？

评论：当标题非常相似时，我也不认为这个问题与How to Bundle and render scripts in mvc 4 -- asp.net?重复。

Answer 1

捆绑和缩小可以减少对服务器的请求数量并减少所请求资产（例如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 for Jquery和其他标准CSS / Javascripts是一种很好的方法，因为内容从不同的服务器并行加载。

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

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

1 个答案: