Bundling JavaScript resources for an MVC app This is my first MVC app. I'm looking for best practice feedback on how to best bundle the files that I need, the order to bundle them, the placement of the @render methods within the containing html page.

BundleConfig

namespace StateAssessment
{
    using System.Web.Optimization;

    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

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

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

            // 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 ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));

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

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            #if DEBUG
                BundleTable.EnableOptimizations = false;
            #else
                BundleTable.EnableOptimizations = true;
            #endif            
        }
    }
}


_layout.cshtml

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;State Assessment Recovery System - @ViewBag.Title&lt;/title&gt;    
    &lt;link href="~/Content/themes/base/all.css" rel="stylesheet" /&gt;
    @Styles.Render("~/Content/css")
    @RenderSection("Styles", required: false)

    @using StateAssessment.CommonHelpers.HelperControls;

    &lt;meta name="description" content="The description of my page" /&gt;
&lt;/head&gt;
&lt;body&gt;
    @RenderBody()

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
&lt;/body&gt;
&lt;/html&gt;


Index.cshtml

@model StateAssessment.ViewModels.StateAssessment.Index

@section Styles {
    &lt;link href="@Url.Content("~/Content/ViewSpecific/StateAssessment/IndexItem.css")"  rel="stylesheet"/&gt;
}

    &lt;!--markup goes here --&gt;

    @section Scripts {

         &lt;script src="~/Scripts/ViewSpecific/StateAssessment/Index.js" type="text/javascript"&gt;
         }
        &lt;/script&gt;
    }
The best practice moved from using dotNet code for bundling, to use tools for this.

The most popular and best practised tools are:


gulp
grunt


Both are tools that work on top of nodejs, an easy to install app.

Use either of these tools to minify and bundle your js and css and reference to result file.

You can make the tooling run on build events of your project to always have it bundled

But, best practise here is to use development files in development (to  keep yourdev cycle a short as possible). And in production use the bundled and minified version.