Building Web

Applications with 1

Microsoft ASP.NET -
I376
Web Application
Programming II – I713
IT College, Andres Käver, 2016-2017, Spring semester
Web: http://enos.Itcollege.ee/~akaver/ASP.NETCore
Skype: akaver Email: akaver@itcollege.ee
Bundling and Minification

 Bundling
Bundling is a feature that makes it easy to combine or bundle
multiple files into a single file.

 File ordering is important!!!!!!!!!! <-<-<-

 Minification
Minification performs a variety of different code optimizations to
reduce the size of requested assets (such as CSS, images,
JavaScript files). Common results of minification include removing
unnecessary white space and comments, and shortening variable
names to one character.
 Bundling and Minification

 JS before minification

AddAltToImg = function (imageTagAndImageID, imageContext) {

var imageElement = $(imageTagAndImageID, imageContext);
imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

 After minification

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};
Bundling and Minification

 Minification
 Level 1 – removal of white space and comments
 Level 2 – removal of extra semicolons and curly braces
 Level 3 – local variable shortening
 Level 4 – remove unreachable code
 Level 5 – Global shortcuts and shortening of function names

 Most minifiers work on Level 3

Bundling and Minification

 Minification
 Jquery
 300kb -> 100kb
 Jquery UI
 430kb -> 220kb
 AngularJS
 500kb -> 100kb
 !!!!! Higher level of minification???
Bundling and Minification

 Install this extension to get some additional contextual help in

VS:

https://marketplace.visualstudio.com/items?
itemName=MadsKristensen.BundlerMinifier

 Install this nuget package to get build time bundling and

minification:

BuildBundlerMinifier
Bundling and Minification
[
{
"outputFileName": "wwwroot/css/site.min.css",
 Configuration is in "inputFiles": [
"wwwroot/css/site.css"
bundleconfig.json ]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
Bundling and Minification

 Input files support bash globbing pattern

http://www.tldp.org/LDP/abs/html/globbingref.html

 "inputFiles": ["wwwroot/**/*(*.css|!(*.min.css)"]
gets all css files and excludes the minified file pattern
Bundling and Minification

 Javascript minifier settings

 enabled: true
 alwaysEscapeNonAscii : true
 preserveImportantComments: true
 termSemicolons: true
 renameLocals: true
 evalTreatment: "ignore” //makeImmediateSafe, makeAllSafe
 outputMode: "singleLine” //multipleLines (uses identSize), none
 indentSize: 2
THE END