ASP. NET MVC4 js css file merging function (3), mvc4css
MVC4 adds some new functions. Next, we will study the new functions in MVC4. When creating an MVC4 project, we will find that an additional App_Start folder is added under the project, the folder contains four files, BundleConfig. cs, FilterConfig. cs, RouteConfig. cs, WebApiConfig. cs, where BundleConfig. the cs file is the file we will talk about in this section.
As we all know, when a browser sends a request to the server, the number of file connections requested is limited. You can use BundleConfig to merge multiple file requests into one request, remove some comments in the file, empty spaces, compress the file size, automatically merge and compress the optimization code, and shorten the response time, improve the speed of the web page and optimize the website.
1. Define a group
After creating the MVC4 project, we will see the following code in the Application_Start () method in the global. asax file for registration.
BundleConfig. RegisterBundles (BundleTable. Bundles );
BundleConfig. cs code:
Public class BundleConfig {// For more information about bunddling, 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 "); bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include ("~ /Scripts/jquery. unobtrusive *","~ /Scripts/jquery. validate * "); // use the development version of Modernizr for development and understanding. Then, use http://modernizr.com To select only the required test. Bundles. Add (new ScriptBundle ("~ /Bundles/modernizr "). Include ("~ /Scripts/modernizr-* "); 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 "));}}
BundleCollection is a collection used to Add binding rules to the collection and use the Add method.
Bundles. Add (new ScriptBundle ("~ /Bundles/jquery "). Include ("~ /Scripts/jquery-{version}. js "));
New ScriptBundle ("~ /Bundles/jquery ") defines a group name. Include indicates the files included in the group.
The version parameter represents the version number, and * represents all. The two parameters can be understood as wildcards.
The code above indicates creating ~ /Bundles/jquery group, the group points to the file is the jquery-1.7.1.js file under the scripts folder.
If the scripts folder has a jquery-1.7.1.js, The jquery-1.6.1.js points to the two files.
Similarly, bundles. Add (new StyleBundle ("~ /Content/css "). Include ("~ /Content/site.css "); indicates that ~ /Content/css group, pointing ~ /Content/site.css file.
2. Use Group
The Group has been defined. Next we will demonstrate how to use it.
If you use scripts on the page, you can use @ Scripts. Render ("~ /Bundles/jquery ") method. The parameter is the group name.
If css is used on the page, you can use @ Styles. Render ("~ /Content/css ") method. The parameter is the group name.
You can see the _ Layout. cshtml file in the Shard folder under the VIEWS folder.
<!DOCTYPE html>After running the project, you can view the page source code. The effect is as follows:
3. Merge requests
Next, we will merge multiple requested files into one request by grouping. The following two methods can be used to achieve this:
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 BundleConfig method;
Run the page again. The following code is generated:
Src = "/bundles/jquery? V = wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
? The group name is followed by the hash code generated after multiple files are merged.4. Comparison results
We use firebug in Firefox to check the comparison results before and after the merge. We can compare the difference in the requested file size and time.
Before compression and merge:After compression and merging:
Note: by default,
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: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);We Merge multiple requested files into one request by grouping, compress the file size, and automatically compress the optimization code to shorten the response time and improve the webpage speed. I hope this article will help you better optimize your website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
