Bundling And Minification In MVC - Part 1

What is Bundling

  • Bundling is a process of grouping the css / javascript files.
  • This group of multiple file is combined into a single file.
  • This single file can be cached.
  • Intention of bundling is to improve performance / optimization.

How my page works without Bundling

Without bundling your page downloads each script / css file as below:

Consider my example:

If you using chrome browser right click on page, Inspect element, then select Resouc Tab.

Check CSS and JavaScript files as in the following screenshot,

CSS and JavaScript files

You can check that each individual file is downloaded.

How my page works with bundling

If you bundle related css/ JavaScript file, you will find files downloaded as below

index

Note in bundling, functionality in JavaScript /css file won’t get modified.

What is minification

  • Minification is a = process of removing unnecessary comments, spaces from JavaScript / css file.
  • Main intention of minification is to decrease the size of javascript / css files so that load time will get decreased.
  • Functionality of javacript / css file remains same in minification.

How my page works without Minification

Without minification your page downloads each script / css file as it is shown below ( without comments removed and with spaces).

Consider my example:

If you using chrome browser right click on page >> Inspect element >> Resouc Tab.

Check CSS and JavaScript files as below:

JavaScript

How my page works with magnification

If you use minification related css/ JavaScript file, you will find files downloaded as below

Code

Note in minification, functionality in javascript /css file won’t get modified.

All comments are removed, unnecessary spaces are removed. So .css / javascript file size gets reduced and page load performance improves.

I hope you understood this concept Bundling and minification. In next part we will learn how to implement Bundling and minification step by step.