Download presentation
Presentation is loading. Please wait.
Published byJocelyn Park Modified over 8 years ago
1
Bundles, Minification Andres Käver, IT Kolledž 2015 1
2
Bundling Reduce the number of web requests Glue (stitch) multiple files together JavaScript, CSS, Images Ordering is important! 2
3
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
4
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
5
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
6
Minification Jquery 300kb -> 100kb Jquery UI 430kb -> 220kb AngularJS 500kb -> 100kb !!!!! Higher level of minification??? 6
7
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
8
Tools Inspect element – network Yslow analyzer 8
9
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
10
Basic optimization Global_asax App_Start\BundleConfig.cs 10 protected void Application_Start(){ … BundleConfig.RegisterBundles(BundleTable.Bundles); } 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")); }
11
Basic optimization Reference in views: _Layout.cshtml 11 @ViewBag.Title - My ASP.NET Application @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") … @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)
12
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
13
Bundle MVC consumption @Scripts.Render @Styles.Render Debug mode will not use bundles Scripts.RenderFormat – custom tags Scripts.Url – just url path 13
14
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 14 BundleTable.EnableOptimizations = true;
15
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
16
Bundle building Get files Filter ignore list Order files (jquery first) Process file extension replacements Build bundle 16
17
Caching & Versioning Caching and versioning have been built in /Content/css?v=RaidzmoMYrx5U9SiK8maUmu7qvhkDERc00iig4ul KpM1 /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
18
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
19
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
20
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
21
File ordering Important to include some Scripts and Styles before others Jquery is often hard requirement Reset CSS files 21
22
Content delivery networks Multiple servers Used for well known libraries (Jquery) Takes load off your server Caching Built in support 22 bundles.Add(new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js"). Include("~/Scripts/jquery-{version}.js"));
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.