asp.net MVC 4 Bundle and Shrink Example Introduction _ Practical Tips

In ASP.net MVC 4, you can bundle multiple CSS and JS files to reduce HTTP requests and compress (shrink) CSS and JS files to increase the speed of your site's loading. Let's take a look at the CSS file in the blog park, and before ASP.net MVC 4, we introduced the CSS method as follows:

Copy Code code as follows:

<link href= "/content/site.css" rel= "stylesheet" type= "Text/css"/>
<link href= "/content/sitehome.css" rel= "stylesheet" type= "Text/css"/>

Use F12 in IE to view the results, as shown in the figure:




In ASP.net MVC 4, use the following notation to introduce CSS files:

<link href= "/content/css" rel= "stylesheet"/>

Rerun, the result is as follows:

It is clear to see that when you introduce CSS using the new method in ASP.net MVC 4, the Web site runs not only with the CSS file but also by compressing the code in the CSS. Double-click the CSS file and you can see in the response body:

JS files are handled in the same way as CSS, the introduction of the following methods:

Copy Code code as follows:

<script src= "/scripts/js" ></script>

asp.net MVC 4 when bundled, the CSS collation is: First load reset.css, NORMALIZE.CSS, other files sorted alphabetically, similar to the JS collation for Jquery.js, jquery-ui.js Other files are also sorted by the first letter. Sometimes we need to load different CSS or JS files on different pages to reduce unnecessary files, let's see how to customize a bundle below.

Add the following code to the Global.asax.cs file Application_Start ():

Copy Code code as follows:

Defines a bundle named "Mycss", and JS corresponds to the new Jsminify ()
var B = new Bundle ("~/mycss", New Cssminify ());
Add all CSS files under the content folder to the bundle
The third argument false indicates that the subfolders under the content folder are not added to the bundle
B.adddirectory ("~/content", "*.css", false);
Add to Bundletable
BUNDLETABLE.BUNDLES.ADD (b);

So in the page you want to use, add the following code:

Copy Code code as follows:

<link href= "/mycss" rel= "Stylesheet"/>

Summary: ASP.net MVC 4 bundled and reduced functionality, so that the reduction of HTTP requests and compression JS, CSS files become very simple, so that we do not need to manually merge JS, CSS files, and do not need to use tools to compress these files, so that JS, CSS file management becomes simple, easy to maintain, Thus freeing us from repetitive work.

Author: Donqui