c# - 如何在 MVC 4 中正确 bundle 样式和脚本？

Question

虽然我很喜欢 MVC，但我不太了解 bundle 。我阅读了一些关于 bundle 的文档，但直到现在我还没有找到一个通用的概念如何将它用于我的脚本和样式。

经过数小时的反复试验，唯一能始终如一地工作的解决方案是:

1. 使用相对路径 a/b/c 为脚本 x.js 创建包:

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

2. 使用相对路径 a/b/c 为样式 x.css 创建包:

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

并在 View 中将其引用为

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

显然，缺点是对于每条路径，我都需要一个带有键的 bundle ，该键被构造为“路径”+ 后缀(我使用“bundle ”，但其他一切也可以)。

我的路径如下:

• 内容\

  • 日历\
  • 日期选择器\
  • JqGrid\
  • 模板\
    • FontAwesome\
  • ...

• 脚本

  • 白日飞行员
  • jq网格
  • jq图
  • ...

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

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

Answer 1

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

BundleTable.EnableOptimizations = true;

在您的 bundle 注册方法中。

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

    BundleTable.EnableOptimizations = true;
}

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

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