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

This article mainly introduces Asp.Net MVC4 how to use Bundle bundling compression technology, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Many large websites do not use Bundle technology to cause a lot of waste of resources and performance sacrifice, do not underestimate the use of you will find its benefits:

Bundling multiple requests into one request to reduce the number of server requests

Without using Bundle technology, what you can see under debug is the actual number of requests and paths.

Use Bundle technology and have caching function

Debug to Release mode and press F5 or modify web.config, you can see the effect of merging and compression

Compress javascript,css and other resource files to reduce network bandwidth and improve performance

Background configuration

MVC4 has some changes in architecture, simplifying the original Global.asax, adding some static configuration files under App_Start, pay attention to BundleConfig.cs, as the name implies is the configuration of Bundle, all its configuration can be done here, of course, it can also be a separate configuration file.

The copy code is as follows:

Public class BundleConfig {/ / For more information on 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 to develop with and learn from. Then, when you're / / ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 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")) }}

Here you can configure it by modularization. The Url we see below corresponds to the bundles.Add (...) above. Added virtualPath of js and css

It should be noted that the same resource files added by different virtualPath will be loaded repeatedly!

Foreground call

For common resource files, we usually put them in the _ Layout.cshtml (motherboard page in webform) file.

Script file reference: @ Scripts.Render (virtualPath [, virtualPath2] [, virtualPath3] [,...])

CSS file reference: @ Styles.Render (virtualPath [, virtualPath2] [, virtualPath3] [,...])

The copy code is as follows:

@ Styles.Render ("~ / Content/css") @ Styles.Render ("~ / Content/themes/base/css")

...

@ Scripts.Render ("~ / bundles/jquery") @ Scripts.Render ("~ / bundles/jqueryui") @ RenderSection ("scripts", required: false)

Regular matching needs, filtering unneeded

The copy code is as follows:

Bundles.IgnoreList.Clear (); bundles.IgnoreList.Ignore ("* .debug.js"); bundles.IgnoreList.Ignore ("* .min.js"); bundles.IgnoreList.Ignore ("*-vsdoc.js"); bundles.IgnoreList.Ignore ("* intellisense.js"); bundles.Add (new ScriptBundle ("~ / bundles/jquery", jqueryCdn). Include ("~ / Scripts/jquery- {version} .js") / / matches the jquery version bundles.Add (new ScriptBundle ("~ / bundles/jqueryval"). Include ("~ / Scripts/jquery.unobtrusive*", / / matches the file name prefixed with jquery.unobtrusive "~ / Scripts/jquery.validate*");

Use CDN

The copy code is as follows:

Bundles.UseCdn = true; / / use CDN string jqueryCdn = "http:deom.jb51.net/jslib/jquery/jquery-1.7.1.min.js"; bundles.Add (new ScriptBundle ("~ / bundles/jquery", jqueryCdn) .Include ("~ / Scripts/jquery- {version} .js"))

When the cdn server is down or cannot be accessed, the local resource file will be selected here. Mvc under debug will let us see its original mask, which is very convenient for us to debug.

Thank you for reading this article carefully. I hope the article "Asp.Net MVC4 how to use Bundle binding and Compression Technology" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.