Basics of Bundling and Minification
As more and more people use mobile devices to surf the web, it is becoming increasingly important that the websites and apps we build perform well with them. We’ve all tried loading sites on our smartphones – only to eventually give up in frustration as it loads slowly over a slow cellular network. If your site/app loads slowly like that, you are likely losing potential customers because of bad performance. Even with powerful desktop machines, the load time of your site and perceived performance can make an enormous customer perception.
I have placed following line of code in design
Below I’ve opened a local website in IE9 and recorded the network traffic using IE’s built-in F12 developer tools. Each file is currently requested separately by the browser and returned by the server, and the process can take a significant amount of time proportional to the number of files in question.
Simply replace the lines of code with
Remember js – indicates the extension of files that needs to be bundled and minified
Look at the result
Any number of directories/sub-directories supported
In the example above we just had a single “Scripts” and “Styles” folder for our application. This works for some application types (e.g. single page applications). Often, though, you’ll want to have multiple CSS/JS bundles within your application – for example: a “common” bundle that has core JS and CSS files that all pages use, and then page specific or section specific files that are not used globally.
You can use the bundling/minification support across any number of directories or sub-directories in your project – this makes it easy to structure your code so as to maximize the bunding/minification benefits. Each directory by default can be accessed as a separate URL addressable bundle.
There is BundleConfig.cs defined under /App_Start folder. We can define our custom scripts/style there .
After this reference the same in design page like