ASP. net mvc 4 instance bundling and downgrading

In ASP. net mvc 4, you can bind multiple css and js files to reduce HTTP requests and compress (scale down) css and js files. This increases the loading speed of your website. Let's take a look at the css file in the blog garden. Before ASP. net mvc 4, we introduce the css method as follows:

Copy codeThe Code is 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 result,




In ASP. net mvc 4, use the following method to introduce the css file:

<Link href = "/Content/css" rel = "stylesheet"/>

Run the command again. The result is as follows:

We can clearly see that when a new method is used to introduce css in ASP. net mvc 4, the website runtime not only merges css files but also compresses the code in css. Double-click the css file and you can see in the response body:

The Processing Method for js files is the same as that for css files. The introduction method is as follows:

Copy codeThe Code is as follows:
<Script src = "/Scripts/js"> </script>


ASP. when being bundled in. net mvc 4, the css sorting rule is: Load reset.css1_normalize.css first, and sort other files by the first letter. Similarly, the js sorting rule is 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. Next let's see how to customize a bundle.

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

Copy codeThe Code is as follows:
// Define the bundle named "mycss". js corresponds to new JsMinify ()
Var B = new Bundle ("~ /Mycss ", new CssMinify ());
// Add all css files in the Content folder to the bundle
// The third parameter false indicates that the subfolders in the Content folder are not added to the bundle.
B. AddDirectory ("~ /Content "," *. css ", false );
// Add to BundleTable
BundleTable. Bundles. Add (B );


In this way, add the following code on the page to be used:

Copy codeThe Code is as follows:
<Link href = "/mycss" rel = "Stylesheet"/>


Summary: ASP. net mvc 4 bundling and downgrading functions make it very easy to reduce http requests and compress js and css files, so we do not need to manually merge js and css files, you do not need to use tools to compress these files, making managing js and css files simple and easy to maintain, freeing us from repetitive work.

Author: Dong Kui