ASP.NET MVC: Performance Optimization with Bundling and Minification
By FoxLearn 5/29/2017 9:53:28 PM 3.23K
How to Optimize performance using Bundling and Minification with ASP.NET Identity MVC 5 using C#, Entity Framework Code First
Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript)
Step 1: Change BundleConfig class as below
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")); bundles.Add(new StyleBundle("~/login/css").Include( "~/bootstrap/css/bootstrap.min.css", "~/dist/css/AdminLTE.min.css", "~/plugins/iCheck/square/blue.css", "~/cloudflare/font-awesome.min.css", "~/cloudflare/ionicons.min.css")); bundles.Add(new ScriptBundle("~/login/js").Include( "~/plugins/jQuery/jquery-2.2.3.min.js", "~/bootstrap/js/bootstrap.min.js", "~/plugins/iCheck/icheck.min.js")); } }
Step 2: Change Login view as below
@using MvcDemo.Models @model LoginViewModel @{ ViewBag.Title = "Log in"; Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Log in</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> @Styles.Render("~/login/css") <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href="../../index2.html"><b>Fox</b>Learn</a> </div> <!-- /.login-logo --> <div class="login-box-body"> <p class="login-box-msg">Sign in to start your session</p> <section id="loginForm"> @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group has-feedback"> @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder = "User name" }) @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" }) <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" }) @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" }) <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-8"> <div class="checkbox icheck"> <label> @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe) </label> </div> </div> <!-- /.col --> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> <!-- /.col --> </div> <p> @Html.ActionLink("Register as a new user", "Register") </p> //Enable this once you have account confirmation enabled for password reset functionality <p> @Html.ActionLink("Forgot your password?", "ForgotPassword") </p> } </section> <section id="socialLoginForm"> @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl }) </section> </div> <!-- /.login-box-body --> </div> <!-- /.login-box --> @Scripts.Render("~/login/js") <script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); }); </script> </body> </html>
VIDEO TUTORIALS
- ASP.NET MVC Responsive Templates Free Download
- How to upload file in ASP.NET MVC
- How to Create Contact Form Flat Responsive in ASP.NET MVC
- How to check if HttpPostedFileBase is an image
- How to upload Multiple File in ASP.NET MVC
- ASP.NET MVC: Implement Password Reset with ASP NET Identity
- ASP.NET MVC: Getting Started
- ASP.NET MVC: Create Custom Routes
Categories
Popular Posts
11 Things You Didn't Know About Cloudflare
12/19/2024