Scribd
Upload
108 views10 pages

Core - 14 - Bundling

The document discusses bundling and minification in ASP.NET applications. It explains that bundling combines multiple files into a single file, while minification optimizes files to reduce size by removing whitespace, comments, and shortening variable names. It provides an example of JavaScript code before and after minification. Additionally, it describes different levels of minification and recommends tools and NuGet packages to enable bundling and minification in ASP.NET projects.

Uploaded by

Ryan Bae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
108 views10 pages

Core - 14 - Bundling

The document discusses bundling and minification in ASP.NET applications. It explains that bundling combines multiple files into a single file, while minification optimizes files to reduce size by removing whitespace, comments, and shortening variable names. It provides an example of JavaScript code before and after minification. Additionally, it describes different levels of minification and recommends tools and NuGet packages to enable bundling and minification in ASP.NET projects.

Uploaded by

Ryan Bae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Building Web 1

Applications with
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: [email protected]
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=MadsKristen
sen.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

You might also like