BUNDLING AND MINIFICATION

ByBooshan.M

LETS STICK TO BASICS……

System.Web.Optimization class offers the bundling and minification techniques that is exist with in the

Microsoft.Web.Optimization dll.

This framework is used to create minified version along with the specified bundles of the files. Download and add file reference to your project

WHAT IS THE USE OF THIS BUNDLING AND MINIFICATION ? Bundling- reduces the no

of files. Minification- makes files

smaller.

Bundling and Minification is more useful in production than in development

It can significantly improve your first page hit download time.

WHY WE USE BUNDLING??? Bundling reduces the number of

individual HTTP requests to server by combining multiple CSS files and Javascript files into single CSS file and javascript file.

Or It’s a simple logical group of files that

could be referenced by unique name and being loaded with one HTTP requestor.

LETS WE BUNDLE IT …………

KEY FACTORS TO BUNDLE…..

Combine multiple files into one Request

Modern browsers limit open connection to 6

Rendering stops to wait for some scripts

CREATING BUNDLES

LETS ANALYZE………

IT’S FASTER…..

AFTER BUNDLING

HOW TO ENABLE BUNDLING???????

If not enabled programmatically, bundling just doesn’t work. As mentioned, bundling is a form of optimization; as such, it mostly makes sense when the site is in production. The Enable Optimization property is a convenient way to set up bundling as it should be in production, but you should disable it until the site is compiled in debug mode. 

BUSTING BROWSER'S CACHE BY BUNDLING

Bundles automatically takes care of this problem by adding a hashcode to each bundle as a query parameter to the URL as shown below. Whenever you change the content of css and js files then a new hash code will be generated and rendered to the page automatically. In this way, the browser will see a different url and will fetch the new copy of css and js.

MINIFICATION Reducing the size of Script/css file by

removing

Extra White Spaces. New Line Characters. Comments. and using Shorter Variables. Almost exclusively for javascript and CSS. The Functionality will be the same as before.

PROS AND CONS As the minified files are very small, they will

be downloaded faster and Consumes less Bandwidth. as search engine like google considers page Loading Time as a case of parameter to rank the pages

Harder to Debug .Nevertheless for debugging deployment we can use non-minified version and use minified versions on the production Environment.

THAT’S IT..

Thank You