Bundles, Minification Andres Käver, IT Kolledž

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  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")); }

Basic optimization  Reference in views: _Layout.cshtml - My required: false)

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  Debug mode will not use bundles  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 14 BundleTable.EnableOptimizations = true;

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 /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 22 bundles.Add(new ScriptBundle("~/bundles/jquery", " Include("~/Scripts/jquery-{version}.js"));