Bundling And Minification In MVC - Part 2

Ajay Gandhi

11y18.1k10100Article

10 Comments

Join the conversation! Your thoughts help the community grow.

Kaustubh11y ago
Nice article, thanks for sharing
Santhakumar Munuswamy11y ago
Good one
Sibeesh Venu11y ago
Nice Share
Tobias Lundin11y ago
Always bundle and then use sourcemaps for debugging.
Tobias Lundin11y ago
Eh. Recommending a practice that was removed from the framework?Get with the times, bundle with grunt, gulp, webpack, browserify, rollup or uglify.
Harshad Pansuriya11y ago
Nice one
Pawan Chand11y ago
Thanks Ajay
Muhammad Aqib Shehzad11y ago
good elaboration of bundling and minification in MVC, i have previously done in Webforms.
Ajay Gandhi11y ago
Thanks
Raja T11y ago
Nice,Thanks for sharing

Before reading this article, I highly recommend reading the previous part of the series:

Bundling And Minification In MVC - Part 1

Now follow below steps:

Step 1: In Web config add bundle module and make sure you have added the dll.

System.Web.Optimization.BundleModule in project.
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule"/>
<add name="BundleModule" type="System.Web.Optimization.BundleModule"/>
</modules>
</system.webServer>

Step 2: Register your JavaScript and JQuery bundles Bundle Module as in the following way,

In new script bundle mention the bundle name and include section mention the script file names.
If version of script files is changing the mention {version} it will automatically take the latest version. Here's the code,

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/jqueryui").Include("~/Scripts/jquery-ui-{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"));
//bundles.Add(new StyleBundle("~/Content/themes/redmon/css").Include(
// "~/Content/themes/redmon/jquery-ui.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/core.css", "~/Content/themes/base/resizable.css", "~/Content/themes/base/selectable.css", "~/Content/themes/base/accordion.css", "~/Content/themes/base/autocomplete.css", "~/Content/themes/base/button.css", "~/Content/themes/base/dialog.css", "~/Content/themes/base/slider.css", "~/Content/themes/base/tabs.css", "~/Content/themes/base/datepicker.css", "~/Content/themes/base/progressbar.css", "~/Content/themes/base/theme.css"));
}
}

Step 3: Verify BundleConfig are called in App_Start,

webConfig

Step 4: Call the bundle in _Layout.cshtml section,

My _Layout page is as below:

<!DOCTYPE html>
<html>
<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") @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") </head>
<body>
<div class="container body-content"> @RenderBody() </div>
</body>
</html>

Step 5: Bundling doesn’t work in debug mode,

So either explicitly off debug mode in Webconfig as in the following way,

OR

Mention below line in global.asx in application_start function

BundleTable.EnableOptimizations = true;

Step 6: Run the project,

While running the project it will ask to run without debugging as in the following,

project

Select run without debugging and click ok button (Option will be displaed only you off debug mode).

Run the project

Verify in chrome browser, right click, then select Inspect element and Source Tab. Your css and javascript file are bundled and minified as in the following,