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.