ASP.NET MVC: Performance Optimization with Bundling and Minification
By FoxLearn 5/29/2017 9:53:28 PM 3.15K
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: Free Responsive Templates
- ASP.NET MVC: Implement Password Reset with ASP NET Identity
- ASP.NET MVC: Getting Started
- ASP.NET MVC: Create Custom Routes
- ASP.NET MVC: Create Login Form
- ASP.NET MVC: Login with Google Account
- ASP.NET MVC: Custom properties for IdentityUser
- ASP.NET MVC: Insert Update Delete and View data from SQL Database
Categories
Popular Posts
How to sign a powershell script
10/03/2024
How to get Credentials in PowerShell?
10/03/2024
How to implement Jint in C#
09/14/2024