courtship and rick moranis

START BENEFITS

HOW TO PLUGINSINSIDE CUSTOM CONTACTBehind the words Why should you care Strategies PreprocessorsTimeline Write your

ownConclusion etc.

Thanks to our AWESOME sponsors!

START BENEFITS


ownConclusion etc.

Courtship And Rick MoranisASP.NET Bundling and Minification

01

START BENEFITS


ownConclusion etc.

ASP.NET Bundling and Minification

Courtship & Rick Moranis

3

START

MINIFICATION MAKING THINGS SMALLER

To Minify is to make things smaller

by repeated increases in production

technology. To use new advances to

reduce the size of the item being

created.

BUNDLINGBEDROOM COURTING

To bundle means to go to bed

with one of the opposite sex

or visit the bedroom of a

sweetheart in order to talk to

ones beloved. Wrapping up

and being restricted, into the

covers.

http://www.horseshoe.cc/pennadutch/culture/customs/bundling.htm

Old usages

START BENEFITS


ownConclusion etc.



4

START

MINIFICATION REDUCING A FILE’S SIZE

To Minify is to make things smaller

by many different techniques.

Including :

• removing whitespace.

• renaming internal variables

• removing duplicate code

• Byte compression (zip)

BUNDLINGCOMBINING MANY FILES INTO ONE

To bundle means to combine

many asset (Typically

JavaScript or CSS) files into a

single file. Reducing the

number of files.

Modern Meanings

START BENEFITS


ownConclusion etc.



5

BENEFITS

BUNDLINGFEWER REQUESTS

Gives Less time waiting for

round trips.

Fewer Blocks when hitting

request limits

MINIFICATIONFEWER BYTES OVER THE WIRE

Saves on bandwidth costs

Works better on mobile and

low bandwidth situations

Quicker time to load the page

Why should you care?

START BENEFITS


ownConclusion etc.



6

BENEFITSWhy should you care?

Demo 1

START BENEFITS


ownConclusion etc.



7

HOW TO

Enable

1.Debug = “false”

2.EnableOptimizations = True

Enabling BAM!

START BENEFITS


ownConclusion etc.



8

HOW TOEnabling BAM!

Demo 2

START BENEFITS


ownConclusion etc.



9

HOW TO

Bundles • A Logical Grouping

• Everything that a page will need

• Jquery

• Underscore

• Backbone

• Backbone.Marionette (a plugin)

Configuring BUNDLES

START BENEFITS


ownConclusion etc.



10

HOW TOConfiguring BUNDLES

Demo 3

START BENEFITS


ownConclusion etc.



11

HOW TO

Default Ignore list

bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

bundles.IgnoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);

bundles.IgnoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);

Configuring BUNDLES

START BENEFITS


ownConclusion etc.



12

HOW TOConfiguring BUNDLES

Demo 4

START BENEFITS


ownConclusion etc.



13

HOW TO

When does it not use CDN

(Debug=false && Enableoptimizations=false)

|| useCDN=false

Configuring BUNDLES

START BENEFITS


ownConclusion etc.



14

HOW TOConfiguring TAGS

Demo 5

START BENEFITS


ownConclusion etc.



15

HOW TO

Async and defer

• Async loads asynchronously and unblocking

Configuring BUNDLES

START BENEFITS


ownConclusion etc.



16

HOW TO

Async and defer

• Defer loads asynchronously but in order

Configuring BUNDLES

START BENEFITS


ownConclusion etc.



17

INSIDE

Application Scope

TIMELINE

PRE-Application Application_Start

• Registers BundleModule •Calls RegisterBundles

START BENEFITS


ownConclusion etc.



18

INSIDE

REQUEST Scope

TIMELINE

Bundle module BundleHandler

• Is Request for Valid Bundle?

• Send to BundleHandler

• Return 304 (not modified) for conditional get header

• Return from cache if exists

START BENEFITS


ownConclusion etc.



19

INSIDE

Response Scope (Happens on View Render)

TIMELINE

Get Files Ignore

File Extensions ORDER

Build Minify

Place IN Cache

START BENEFITS


ownConclusion etc.



20

PLUGINS

Take Code you understand to js and CSS

• LESS

• SASS

• CoffeeScript

• TypeScript

• Others?

PREPROCESSORS

START BENEFITS


ownConclusion etc.



21

PluginsPreprocessors

Demo 6

START BENEFITS


ownConclusion etc.



22

Custom

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

Write your own preprocessor

START BENEFITS


ownConclusion etc.



23

Custom

Plans

Write your own preprocessor

• Look through css for url(?embed)

• Encode the Image file

• Change the CSS

START BENEFITS


ownConclusion etc.



24

PluginsPreprocessors

Demo 7

START BENEFITS


ownConclusion etc.

NEUTRAMINIMAL KEYNOTE PRESENTATION

28

FOLLOW ME

TWITTER@HURRICANEPKT

BLOGWWW.MARKGREENWAY.NET

DATAURI CreatorGITHUB.COM/HURRICANEPKT/BUNDLINGDATAURI

SLIDESSLIDESHARE.NET/HURRICANEPKT/COURTSHIP-AND-RICK-MORANIS

TWITTER (DEV only)@MarkKGreenway

START BENEFITS


ownConclusion etc.

Thanks to our AWESOME sponsors!

courtship and rick moranis

Technology

make things smaller

preprocessor courtship

plugins courtship

inside courtship

bundles courtship

rick moranis write

courtship

start benefits