2013-09-25 42 views
10

我对捆绑脚本和样式文件的正确方法感到有点困惑。目前,我的BundleConfig.cs看起来是这样的:在MVC4中捆绑的正确方法

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js")); 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
      "~/Scripts/jquery-ui-{version}.js")); 

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
      "~/Scripts/jquery.unobtrusive*", 
      "~/Scripts/jquery.validate*")); 

// Use the development version of Modernizr to develop with and learn from. Then, when you're 
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
      "~/Scripts/modernizr-*")); 

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
      "~/Scripts/knockout-{version}.js", 
      "~/Scripts/knockout-{version}.debug.js", 
      "~/Scripts/knockout-sortable.js")); 

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.resizable.css", 
      "~/Content/themes/base/jquery.ui.selectable.css", 
      "~/Content/themes/base/jquery.ui.accordion.css", 
      "~/Content/themes/base/jquery.ui.autocomplete.css", 
      "~/Content/themes/base/jquery.ui.button.css", 
      "~/Content/themes/base/jquery.ui.dialog.css", 
      "~/Content/themes/base/jquery.ui.slider.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css", 
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 

bundles.Add(new StyleBundle("~/bundles/BootStrapcss").Include(
      "~/BootStrap/css/bootstrap.css", 
      "~/BootStrap/css/bootstrap-fileupload.css")); 

bundles.Add(new StyleBundle("~/bundles/BootStrap").Include(
      "~/BootStrap/tpg-main.css", 
      "~/BootStrap/tpg-internal.css")); 

bundles.Add(new ScriptBundle("~/bundles/BootStrapjs").Include(
      "~/BootStrap/js/bootstrap-fileupload.js", 
      "~/BootStrap/js/bootstrap.js")); 

BundleTable.EnableOptimizations = true; 

应该留与我有什么,或者我的所有脚本文件捆绑为一个ScriptBundle,和我所有的样式合并到一个StyleBundle?我想尽可能达到最佳性能。

回答

14

如果您总是使用所有文件,而不是继续,并将它们粘在两个包中;一个用于JavaScript,一个用于样式。捆绑越少意味着对服务器获取资源的请求就越少,这可能会导致首次访问时的性能稍微提高;随后文件将被浏览器缓存。

如果你并不总是使用所有的文件,那么把它们分成更多的文件夹更有意义。

+6

为了澄清他的观点,您可能只需要在一两页上使用Knockout,而不是整个网站。因此,您不应该将其与其他所有内容捆绑在一起,因为它会在未使用或不需要的页面上加载。 –

+0

@Moozhe是的,谢谢你,我应该扩大一点为完整性。 – asymptoticFault

+0

如何将jquery,validate和modernizr打包成一个? –