MVC 4 Styles.Render & Scripts.Render Clarification

Question

I'm using ASP.NET MVC 4 with Bootstrap and I've noticed that my project is a little bit different from a lot of articles and tutorials about "building your site with Bootstrap", they keep mention the use of minified files of Javascript and CSS (bootstrap.min.css, bootstrap.min.js) and I have only the files without the min although the files are in the directory.

I read about these files but I don't get the point of it, maybe somebody can clarify the use of them and if I need to add reference to them in my bundle config ?

My code looks like this :

_Layout.cshtml:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a href="@Url.Action("Index", "Home")" class="navbar-brand">
                    <span class="glyphicon glyphicon-filter"></span> SelectorIT - OnLine
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

And my BundleConfig.cs:

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*"));

        // 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
        BundleTable.EnableOptimizations = true;
    }
}

Two questions I have :

What am I missing when I don't have reference to bootstrap.min.css, bootstrap.min.js ?
Should I add reference to those files in the:

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

#1 : makes no difference but while deploying out product to product we use min.js . #2 : well bundles .! yes i personally prefer becoz we dont know how many js files we refer in our project . but you can add in bundles and use it . cheers — super cool, Jun 08 '14 at 12:35

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

The min files remove all unnecessary characters to make the file smaller. This decreases loading time. Source.

If you are building a small personal project, performance might not have a high priority. If you are building the site for someone else or an organization, I would suggest using the min versions.

edited May 23 '17 at 12:14

Community

1
1

answered Jun 08 '14 at 12:03

Simon

1,416
1
15
24

Decreases loading time you meant? So if i want to use the smaller file (.min.) i will repleace the "include" of bootstrap.js to bootstrap.min.js ? simply as that ? i dont need to leave the 'bootstrap.js'? just replace it ? – Ron Jun 08 '14 at 12:24
1

bootstrap.js and bootstrap.min.js contain exactly the same information. The difference is that bootstrap.js is easier to read for us humans. bootstrap.min.js is easier to read for computers. It's save to replace bootstrap.js by bootstrap.min.js. – Simon Jun 08 '14 at 12:30

MVC 4 Styles.Render & Scripts.Render Clarification

1 Answers1