Introduction and use of mvc bundle from http://www.ityouzi.com/archives/mvc-bundleconfig.html,mvcbundle

Introduction and use of mvc bundle from http://www.ityouzi.com/archives/mvc-bundleconfig.html,mvcbundle
Asp. Net MVC4 BundleConfig file merging and compression, website optimization Acceleration

When a browser sends a request to the server, the number of file links requested is limited. If there are few page files, there is no problem. If there are too many files, the link will fail. To solve this problem, MVC4 added the new function: BundleConfig. cs, you can use BundleConfig to merge multiple file requests into one request, remove some comments, spaces, and the size of the compressed file, automatically merge the compressed optimization code, and shorten the response time, improve the speed of the web page and optimize the website.

 

Method 1: Register BundleConfig

Add the following code to the Application_Start () method in the global. asax file:

1	BundleConfig.RegisterBundles(BundleTable.Bundles);

 

2. Create a group file

Open the: App_Start/BundleConfig. cs file, which contains some default methods (if the file is not created by yourself, you can view it by creating a non-empty MVC Project)

123456789101112131415161718192021222324252627282930313233343536373839

public class BundleConfig     {         // For more information about Bundling, visit http://go.microsoft.com/fwlink? LinkId = 254725       public static void RegisterBundles(BundleCollection bundles)         {             bundles.Add(new ScriptBundle("~/bundles/jquery").Include(                         "~/Scripts/jquery-{version}.js"));                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(                         "~/Scripts/jquery-ui-{version}.js"));                          // JS File           bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                         "~/Scripts/jquery.unobtrusive*",                         "~/Scripts/jquery.validate*"));                // Use the development version of Modernizr for development and information. Then, when you do           // When preparing production, use the build tool on the http://modernizr.com to select only the desired test.           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(                         "~/Scripts/modernizr-*"));                         // CSS File           bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(                         "~/Content/themes/base/jquery.ui.core.css",                         "~/Content/themes/base/jquery.ui.resizable.css",                         "~/Content/themes/base/jquery.ui.selectable.css",                         "~/Content/themes/base/jquery.ui.accordion.css",                         "~/Content/themes/base/jquery.ui.autocomplete.css",                         "~/Content/themes/base/jquery.ui.button.css",                         "~/Content/themes/base/jquery.ui.dialog.css",                         "~/Content/themes/base/jquery.ui.slider.css",                         "~/Content/themes/base/jquery.ui.tabs.css",                         "~/Content/themes/base/jquery.ui.datepicker.css",                         "~/Content/themes/base/jquery.ui.progressbar.css",                         "~/Content/themes/base/jquery.ui.theme.css"));         }     }

 

Code explanation:

Bundles. Add (new ScriptBundle ("~ /Bundles/jquery "). Include ("~ /Scripts/jquery-{version}. js "));

"~ /Bundles/jquery: indicates the file path of the group (that is, to generate a virtual folder ).

"~ /Scripts/jquery-{version}. js ": indicates the specific file contained in the group, which is the actual file of the project. If there are multiple files, refer to the following code. The {version} parameter represents the version number, and * represents all. The two parameters can be understood as wildcards.

 

Several other additions in the code mean the same. Create different groups based on different file types, such as creating a group for js files and creating a group for css files.

 

3. Group

Add code on the view page

12345678910111213141516171819202122

<!DOCTYPE html>      <meta charset="utf-8" />      <meta name="viewport" content="width=device-width" />      <title>@ViewBag.Title</title>            <! -- Style group code call name is the name of the defined group file -->    @Styles.Render("~/Content/css")            <! -- The call name of the JavaScript grouping code is the name of the defined grouping file -->    @Scripts.Render("~/bundles/modernizr")  <body>      @RenderBody()           <! -- The call name of the JavaScript grouping code is the name of the defined grouping file -->    @Scripts.Render("~/bundles/jquery")           @RenderSection("scripts", required: false)  </body>

 

Code explanation:

1	@Scripts.Render("~/bundles/jquery")

"~ /Bundles/jquery "is the name of the file group defined above.

 

4. Merge page requests

Next, we merge the request files into one request by grouping. We can use the following two methods:

1. Set compilation and debugging debug in web. config to false <compilation debug = "false" targetFramework = "4.5"/>

2. Add BundleTable. EnableOptimizations = true at the end of the method in BundleConfig; (this method is recommended ),

 

After the configuration is complete, refresh the page and you will see:

Src = "/bundles/jquery? V = wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"

Explanation :? The group name is followed by the hash code generated after multiple files are merged.

You can use Firefox's firebug or Google's browser to check the effect before and after the merger. The number and speed of file loading are greatly improved.

 

5. Other considerations

1. Note that Js and css files are distinguished during use. The method used to generate the group is different from the method called at the front end. For details, refer to the code above.

2. By default, BundleTable. Bundles filters out files with the Suffix:

, Intelliisense.js0000-vsdoc.js0000.debug.js0000.min.js0000.min.css,

When the file with the suffix is loaded, it is blank. You can use the following method to remove the filter restrictions on these files:

1234	BundleTable.Bundles.IgnoreList.Clear();     BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);   //BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);    //BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);

 

 

If the prompt is: Unable to load WebGrease. dll, check here: http://ityouzi.com/archives/mvc-webgrease-error.html