Bundling & MinificationWeb Optimization in ASP.NET MVC 4
Agenda                                   Controlling    Bunding & Need    Bundling   Minification   Bundling &     Minific...
Need  Why ?
Need for OPtimization Browser limit simultaneous connections 6 simultaneous connection per hostname Six request process...
Bundling     What ?
Bundling New Feature of ASP.NET 4.5 Combine or Bundle multiple files into a single file Create CSS/JavaScript & other b...
Minification         What ?
Minification Minification = Optimizations to CSS/JS Removes White Space, Comments Shortens variable names to 1 character
Minification
Controlling        How ?
Controlling Bundling & Minification Compilation Element    Set Debug=false BundleTable    Set EnableOptimizations=true...
Bundling & Minification in ASP.NET                             MVC                                Use
Using in ASP.NET MVC Configure Bundles on App_Start Add Bundles to BundleCollection Common Convention:     Selecting “...
DemoLets see the magic
Debug Breakpoints
Debugging USE IE Developer Tools to debug Minified & Bundled JS file Steps:     Fire IE Developer Tools     Select Scr...
Q&A
Thank You
Upcoming SlideShare
Loading in …5
×

Bundling & minification

404 views
289 views

Published on

Presentation on bundling and minification feature of .NET 4.5

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
404
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×