Shulou(Shulou.com)06/03 Report--

Editor to share with you ASP.NET MVC4's js and css file merge function example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Some new features have been added to MVC4. Next, let's study the new features in MVC4. When we create a new MVC4 project, we will find that there is an extra App_Start folder under the project. There are four files under the folder, BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs, and the BundleConfig.cs file is the file we are going to talk about in this section.

It is well known that when a browser sends a request to the server, there is a limit to the number of file connections requested. Using BundleConfig, you can combine multiple file requests into one request, remove some comments in the file, blank, compress the size of the file, automatically merge the compression optimization code, shorten the response time, improve the web page speed, and optimize the website.

1. Define grouping

After creating the MVC4 project, we will see the following code in the Application_Start () method in the global.asax file to register

BundleConfig.RegisterBundles (BundleTable.Bundles)

BundleConfig.cs Code:

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") 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 are ready for production, use the build tool on http://modernizr.com to select only the required tests. 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 that adds binding rules to the collection, using the Add method.

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

New ScriptBundle ("~ / bundles/jquery") defines a grouping name, and Include represents the specific files included under this grouping.

The version parameter represents the version number and * represents all, which can be understood as wildcards.

The above code means to create a ~ / bundles/jquery grouping that points to the jquery-1.7.1.js file under the scripts folder.

If there is a jquery-1.7.1.js,jquery-1.6.1.js under the scripts folder, it points to these two files.

Similarly, bundles.Add (new StyleBundle ("~ / Content/css"). Include ("~ / Content/site.css"); indicates that a ~ / Content/css packet has been created, pointing to the ~ / Content/site.css file.

two。 Use grouping

Now that the grouping is defined, let's demonstrate how to use it.

If you use scripts in your page, you can use the @ Scripts.Render ("~ / bundles/jquery") method, with the parameter as the grouping name

If you use css in a page, you can use the @ Styles.Render ("~ / Content/css") method, with the parameter as the grouping name.

You can take a look at the _ Layout.cshtml file of the Shard folder under the VIEWS folder

@ ViewBag.Title @ Styles.Render ("~ / Content/css") @ Scripts.Render ("~ / bundles/modernizr") @ RenderBody () @ Scripts.Render ("~ / bundles/jquery") @ RenderSection ("scripts", required: false)

After running the project, you can view the source code of the page, and the effect is as follows

3. Merge request

Next, we combine the requested multiple files into one by grouping, which can be implemented in the following two ways

1)。 Set the compilation and debugging debug in web.config to false

2)。 Add BundleTable.EnableOptimizations = true at the end of the method in BundleConfig

Run the page again, and you can see that the following code is generated

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

? The group name is in front of it, followed by the hash code generated by the merging of multiple files.

4. Contrast effect

We use firebug to check the comparison effect before and after the merger under Firefox. We can compare the requested file size, time and other aspects of the difference.

Before compressing and merging:

After compression and merge:

Note: by default, BundleTable.Bundles filters out files with suffixes such as intellisense.js,-vsdoc.js, .debug.js, .min.js, .min.css.

When loading files with suffixes named these, a blank will be displayed.

You can remove the filtering restrictions on these files in the following ways

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 combine the request multiple files into one by grouping, compress the size of the file, automatically merge the compression optimization code, shorten the response time and improve the speed of the web page.

The above is all the contents of the article "sample Analysis of ASP.NET MVC4's js and css file merging functions". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.