1. Building Web Applications with Microsoft ASP
Building Web Applications with Microsoft ASP.NET - I376 Web Application Programming II – I713
IT College, Andres Käver, , Spring semester
Web:
Skype: akaver

2. 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.

3. Bundling and Minification
JS before minification
After minification
AddAltToImg = function (imageTagAndImageID, imageContext) {
var imageElement = $(imageTagAndImageID, imageContext);
imageElement.attr('alt', imageElement.attr('id').replace(/ID/, '')); }
AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

4. Bundling and 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

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

6. Bundling and Minification
Install this extension to get some additional contextual help in VS: sen.BundlerMinifier
Install this nuget package to get build time bundling and minification: BuildBundlerMinifier

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

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

9. 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

10. THE END