Effective Bundling and Minification Techniques for Web Applications
Learn about the important practices of bundling and minification for optimizing the performance of web applications. This guide covers bundling multiple files into a single file, the benefits of minification, different levels of minification techniques, and tools for implementation. Understand how to reduce file sizes, remove unnecessary elements, and improve overall website speed through efficient bundling and minification strategies.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Building Web Applications with Microsoft ASP.NET - I376 Web Application Programming II I713 1 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=MadsKristen sen.BundlerMinifier Install this nuget package to get build time bundling and minification: BuildBundlerMinifier
Bundling and Minification [ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false } ] Configuration is in bundleconfig.json
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
