Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bundling & minification

496 views

Published on

Presentation on bundling and minification feature of .NET 4.5

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bundling & minification

  1. 1. Bundling & MinificationWeb Optimization in ASP.NET MVC 4
  2. 2. Agenda Controlling Bunding & Need Bundling Minification Bundling & Minification Debugging Minification in MVC
  3. 3. Need Why ?
  4. 4. Need for OPtimization Browser limit simultaneous connections 6 simultaneous connection per hostname Six request processed at a time Additional request queued by browser
  5. 5. Bundling What ?
  6. 6. Bundling New Feature of ASP.NET 4.5 Combine or Bundle multiple files into a single file Create CSS/JavaScript & other bundles Fewer file = Fewer HTTP calls Improves first page load experience
  7. 7. Minification What ?
  8. 8. Minification Minification = Optimizations to CSS/JS Removes White Space, Comments Shortens variable names to 1 character
  9. 9. Minification
  10. 10. Controlling How ?
  11. 11. Controlling Bundling & Minification Compilation Element  Set Debug=false BundleTable  Set EnableOptimizations=true  Overrides Web.Config
  12. 12. Bundling & Minification in ASP.NET MVC Use
  13. 13. Using in ASP.NET MVC Configure Bundles on App_Start Add Bundles to BundleCollection Common Convention:  Selecting “.min” file for release when “XYZ.min.js” and “XYZ.js” exist  Selecting the non “.min” for debug  Ignore “-vsdoc” files Can you use wild cards matching  E.g. jquery-{version}.js – will use appropriate version. Helps update using JQuery using Nuget Use Styles.Render() and Scripts.Render() to reference the bundles
  14. 14. DemoLets see the magic
  15. 15. Debug Breakpoints
  16. 16. Debugging USE IE Developer Tools to debug Minified & Bundled JS file Steps:  Fire IE Developer Tools  Select Scripts Tab  Start Debugging & Select Bundle  Format the minified file  Breakpoint and Debug
  17. 17. Q&A
  18. 18. Thank You

×