title: Correct way to bundle in MVC4
body: <p>I'm a bit confused on the correct way to bundle script and style files.  Currently, my BundleConfig.cs looks like this:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Should stay with what I have, or bundle all my script files into one <code>ScriptBundle</code>, and all my styles into one <code>StyleBundle</code>? I want to achieve the best performance possible.  </p>