1. Thanks to our
AWESOME
sponsors!
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
2. 01
Courtship And
Rick Moranis ASP.NET Bundling and Minification
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
3. 3 ASP.NET Bundling and
START
Courtship & Rick Moranis
Old usages
Minification
BUNDLING
BEDROOMCOURTING
MINIFICATION
MAKING THINGS SMALLER
To bundle means to go to bed To Minify is to make things smaller
with one of the opposite sex by repeated increases in production
or visit the bedroom of a technology. To use new advances to
sweetheart in order to talk to reduce the size of the item being
ones beloved. Wrapping up created.
and being restricted, into the
covers.
http://www.horseshoe.cc/pennadutch/culture/customs/bundling.htm
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
4. 4 ASP.NET Bundling and
START Meanings
Courtship & Rick Moranis
Modern
Minification
BUNDLING INTO ONE
COMBINING MANY FILES
MINIFICATION
REDUCING A FILE’S SIZE
To bundle means to combine To Minify is to make things smaller
many asset (Typically by many different techniques.
JavaScript or CSS) files into a Including :
single file. Reducing the • removing whitespace.
number of files. • renaming internal variables
• removing duplicate code
• Byte compression (zip)
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
5. 5 ASP.NET Bundling and
BENEFITS you care?
Courtship & Rick Moranis
Why should
Minification
BUNDLING
FEWERREQUESTS
MINIFICATION
FEWER BYTES OVER THE WIRE
Gives Less time waiting for Saves on bandwidth costs
round trips.
Works better on mobile and
Fewer Blocks when hitting low bandwidth situations
request limits
Quicker time to load the page
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
6. 6 ASP.NET Bundling and
BENEFITS you care?
Courtship & Rick Moranis
Why should
Minification
Demo 1
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
7. 7 ASP.NET Bundling and
HOW TO BAM!
Courtship & Rick Moranis
Enabling
Minification
Enable
1.Debug = “false”
2.EnableOptimizations = True
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
8. 8 ASP.NET Bundling and
HOW TO BAM!
Courtship & Rick Moranis
Enabling
Minification
Demo 2
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
9. 9 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
Bundles
• A Logical Grouping
• Everything that a page will need
• Jquery
• Underscore
• Backbone
• Backbone.Marionette (a plugin)
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
10. 10 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Minification
Demo 3
Configuring
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
11. 11 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
Default Ignore list
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
bundles.IgnoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
bundles.IgnoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
12. 12 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
Demo 4
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
13. 13 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
When does it not use CDN
(Debug=false && Enableoptimizations=false)
|| useCDN=false
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
14. 14 ASP.NET Bundling and
HOW TO TAGS
Courtship & Rick Moranis
Minification
Demo 5
Configuring
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
15. 15 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
Async and defer
• Async loads asynchronously and unblocking
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
16. 16 ASP.NET Bundling and
HOW TO BUNDLES
Courtship & Rick Moranis
Configuring
Minification
Async and defer
• Defer loads asynchronously but in order
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
17. 17 ASP.NET Bundling and
INSIDE
Courtship & Rick Moranis
TIMELINE
Minification
Application Scope
PRE-Application Application_Start
• Registers BundleModule • Calls RegisterBundles
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
18. 18 ASP.NET Bundling and
INSIDE
Courtship & Rick Moranis
TIMELINE
Minification
REQUEST Scope
Bundle module BundleHandler
• Is Request for Valid Bundle? • Return 304 (not modified)
for conditional get header
• Send to BundleHandler
• Return from cache if exists
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
19. 19 ASP.NET Bundling and
INSIDE
Courtship & Rick Moranis
TIMELINE
Minification
Response Scope (Happens on View Render)
Get Files Ignore
File Extensions ORDER
Build Minify
Place IN Cache
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
20. 20 ASP.NET Bundling and
PLUGINS
Courtship & Rick Moranis
PREPROCESSORS
Minification
Take Code you understand to js and CSS
• LESS
• SASS
• CoffeeScript
• TypeScript
• Others?
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
21. 21 ASP.NET Bundling and
Plugins
Courtship & Rick Moranis
Preprocessors
Minification
Demo 6
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
22. 22 ASP.NET Bundling and
Custom own preprocessor
Courtship & Rick Moranis
Write your
Minification
CSS Convert Images to DATA URI
• Idea from Mads Kristensen
• data:[<mime type>][;charset=<charset>][;base64],<encoded data>
• Reduces Requests
• Access Files at bundle reference
• Seems like logical extension of bundling
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
23. 23 ASP.NET Bundling and
Custom own preprocessor
Courtship & Rick Moranis
Write your
Minification
Plans
• Look through css for url(?embed)
• Encode the Image file
• Change the CSS
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
24. 24 ASP.NET Bundling and
Plugins
Courtship & Rick Moranis
Preprocessors
Minification
Demo 7
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
25. 28 NEUTRA
FOLLOW ME
MINIMAL KEYNOTE PRESENTATION
SLIDES
SLIDESHARE.NET/HURRICANEPKT/COURTSHIP-AND-RICK-MORANIS
TWITTER (DEV only)
@MarkKGreenway
TWITTER
@HURRICANEPKT
BLOG
WWW.MARKGREENWAY.NET
DATAURI Creator
GITHUB.COM/HURRICANEPKT/BUNDLINGDATAURI
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.
26. Thanks to our
AWESOME
sponsors!
START BENEFITS HOW TO INSIDE PLUGINS CUSTOM CONTACT
Behind the words Why should you care Strategies Timeline Preprocessors Write your Conclusion etc.