Presentation on bundling and minification feature of .NET 4.5

1. Bundling & Minification
Web Optimization in ASP.NET MVC 4

2. Agenda
Controlling Bunding &
Need Bundling Minification Bundling & Minification Debugging
Minification in MVC

3. Need
Why ?

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. Bundling
What ?

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. Minification
What ?

8. Minification
 Minification = Optimizations to CSS/JS
 Removes White Space, Comments
 Shortens variable names to 1 character

9. Minification

10. Controlling
How ?

11. Controlling Bundling & Minification
 Compilation Element
 Set Debug=false
 BundleTable
 Set EnableOptimizations=true
 Overrides Web.Config

12. Bundling & Minification in ASP.NET
MVC
Use

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. Demo
Lets see the magic

15. Debug
Breakpoints

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. Q&A

18. Thank You