How to Bundling and Minification in ASP.NET MVC
By FoxLearn Published on Feb 18, 2024 372
Bundling and minification are very useful to improve request load time. It improves load time by reducing the number of requests to the server and reducing the size of requested resources.
Bundling is a new feature that allows you to combine multiple files into a single file and help you improve your page load performance for the first time.
using System.Web; using System.Web.Optimization; namespace Invoice { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.unobtrusive-ajax.min.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new StyleBundle("~/login/css").Include( "~/assets/css/bootstrap.min.css", "~/assets/css/font-awesome.min.css", "~/assets/css/beyond.min.css", "~/assets/css/animate.min.css")); bundles.Add(new ScriptBundle("~/login/js").Include( "~/assets/js/skins.min.js", "~/assets/js/jquery.min.js", "~/assets/js/bootstrap.min.js", "~/assets/js/slimscroll/jquery.slimscroll.min.js", "~/assets/js/beyond.js")); bundles.Add(new StyleBundle("~/main/css").Include( "~/assets/css/bootstrap.min.css", "~/assets/css/font-awesome.min.css", "~/assets/css/beyond.min.css", "~/assets/css/dataTables.bootstrap.css", "~/Content/toaster.min.css")); bundles.Add(new ScriptBundle("~/main/js").Include( "~/assets/js/skins.min.js", "~/assets/js/jquery.min.js", "~/assets/js/bootstrap.min.js", "~/assets/js/slimscroll/jquery.slimscroll.min.js", "~/assets/js/beyond.min.js", "~/assets/js/datetime/bootstrap-datepicker.js", "~/assets/js/datetime/moment.min.js")); } } }
To use bundling you can add to the Layout as shown below
<head> @Styles.Render("~/login/css") </head> <body> @Scripts.Render("~/login/js") </body>
As you can see, only one file loaded in the network tab when running the published website on IIS or run without debugging by setting debug is false in the web.config file.
system.web> <compilation debug="false" targetFramework="4.6.2"> </system.web>
Minification help you reduce file size by removing unnecessary white space and comments and shortening variable names to one character.
- Essential Tips for Securing Your ASP.NET Website
- Top Security Best Practices for ASP.NET
- Boost Your ASP.NET Core Website Performance with .NET Profiler
- The name 'Session' does not exist in the current context
- Implementing Two-Factor Authentication with Google Authenticator in ASP.NET Core
- How to securely reverse-proxy ASP.NET Core
- How to Retrieve Client IP in ASP.NET Core Behind a Reverse Proxy
- Only one parameter per action may be bound from body in ASP.NET Core
Categories
Popular Posts
11 Things You Didn't Know About Cloudflare
Dec 19, 2024
AdminKit Bootstrap 5 HTML5 UI Kits Template
Nov 17, 2024
RuangAdmin Template
Nov 13, 2024
Admin BSB Free Bootstrap Admin Dashboard
Nov 14, 2024