ASP.NET MVC Bundling and Minification Best Practices
Optimizing web performance through bundling and minification in ASP.NET MVC can significantly reduce the number of web requests, improve file size, and enhance page loading speed. Learn about the importance of ordering, minification techniques, levels of minification, performance benefits, and essential tools for efficient development.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Bundles, Minification ASP.NET MVC ASP.NET MVC Andres K ver, IT Kolled 2015 1
Bundling Reduce the number of web requests Glue (stitch) multiple files together JavaScript, CSS, Images Ordering is important! 2
Minification Reduce the size of the file Can be performed against any interpreted language (JavaScript, CSS, ) Remove unused characters Similar to compression Browser can interpret the minified file as is 3
Minification - JS Order does not matter Can be processed alongside already bundled code Removal of line breaks Removal of final semicolon Removal of white space Shortening of local variable names 4
Minifaction - levels Level 1 removal of white space and comments Level 2 removal of extra semicolons and curly braces Level 3 local variable shortening Level 4 remove unreachable code Level 5 Global shortcuts and shortening of function names Most minifiers work on Level 3 5
Minification Jquery 300kb -> 100kb Jquery UI 430kb -> 220kb AngularJS 500kb -> 100kb !!!!! Higher level of minification??? 6
Why Increase the performance Mobile users have slow and costly connections Reduce server load Do not rely on the browser for caching Development efficiences Browsers have limits on simultaneous requests (typically 6 per hostname) 7
Tools Inspect element network Yslow analyzer 8
ASP.NET Optimization library Part of ASP.NET Web framework Mature and complete High level features Integrated with MVC Optimizations are auto-disabled in development Caching and versioning File ignoring, ordering, and extension replacements 9
Basic optimization Global_asax protected void Application_Start(){ BundleConfig.RegisterBundles(BundleTable.Bundles); } App_Start\BundleConfig.cs 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*")); 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")); } 10
Basic optimization Reference in views: _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> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> 11
Bundle declarations Programmatic declaration Series of transformations are applied ScriptBundle and StyleBundle are convenience types (JsMinify, CssMinify) Watch out for route naming conflicts (MVC, WEB-API, existing directories) Use prefix 12
Bundle MVC consumption @Scripts.Render @Styles.Render Debug mode will not use bundles <system.web> <compilation debug="true" targetFramework="4.5.1" /> <httpRuntime targetFramework="4.5.1" /> </system.web> Scripts.RenderFormat custom tags Scripts.Url just url path 13
Enabling optimizations Optimizations are enabled automatically when not in debug No minifying Bundle paths are still available with transformations Optimizations can be enabled programmatically - global BundleTable.EnableOptimizations = true; 14
Lifecycle Bundle module checks the request URL Request is intercepted if Valid Bundle Path Request is passed to a Bundle Http Handler Returns 304 if cached Check ASP.NET cache for previously built bundle Begin rebuilding bundle Razor view request pre-process bundles found in views 15
Bundle building Get files Filter ignore list Order files (jquery first) Process file extension replacements Build bundle 16
Caching & Versioning Caching and versioning have been built in /Content/css?v=RaidzmoMYrx5U9SiK8maUmu7qvhkDERc00iig4ul KpM1 1-year expiry Ensure usage of Scripts & Styles helper Cached bundles ARE NOT refreshed until server cache is refreshed 17
Ignoring files *.intellisense.js *.debug.js Ignoring is built in Can specify to ignore always, when optimization is enabled or when optimization is disabled Default ignore patterns ignorelist,Ignore( *.map , .); 18
File extension replacements Allows for tranformation of file names Enables usage of the .min files in Optimization mode Also adds .debug files when not in optimization mode Custom file extension replacements can be included BundleTable.Bundles. FileExtensionReplacemenList 19
Wildcard replacements * - generic Only ONE wildcard can be used in a path {version} is a special moniker Used for replacing version numbers in file names Not same as using * wildcard 20
File ordering Important to include some Scripts and Styles before others Jquery is often hard requirement Reset CSS files 21
Content delivery networks Multiple servers Used for well known libraries (Jquery) Takes load off your server Caching Built in support bundles.Add(new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js"). Include("~/Scripts/jquery-{version}.js")); 22
