Introduction to bundling Compression Technology Based on Asp. Net MVC4 Bundle

I'm glad that Asp has been used in the recent project. net MVC4 + Entity Framework5 found that mvc4 was added to Bundle, Web API and other technologies, which really excited me. I used to use third parties. Here I will mainly talk about Bundle technology.

Many large websites do not use the Bundle technology to cause a lot of resource waste and performance sacrifices. Don't underestimate the advantages of using it:

Bind multiple requests to one request to reduce the number of server requests

The Bundle technology is not used. In debug, the actual number of requests and paths are displayed.

 

Use Bundle technology and have the cache Function
When debugging is set to Release mode and press F5 or modify web. config, you can see the effect of merge and compression.

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

Background Configuration

MVC4 has some architectural changes, simplifying the original Global. asax adds some static configuration files under App_Start. Pay attention to BundleConfig. cs, as its name implies, is a Bundle configuration. All its configurations can be done here, and of course they can be configured separately.

Copy codeThe 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 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 we can configure it according to modularization. the following Url corresponds to the js and css virtualPath added by bundles. Add (...) above.

Note that the same resource files added to different virtualpaths will be reloaded!

Frontend call

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

Script File Reference: @ Scripts. Render (virtualPath [, virtualPath1] [, virtualPath2] [,...])
CSS file reference: @ Styles. Render (virtualPath [, virtualPath1] [, virtualPath2] [,...])

Copy codeThe 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)

Which is required for regular expression matching and does not need to be filtered.

Copy codeThe 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 ("* intelliisense. js "); bundles. add (new ScriptBundle ("~ /Bundles/jquery ", jqueryCdn). Include ("~ /Scripts/jquery-{version}. js "); // match the jquery version bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include ("~ /Scripts/jquery. unobtrusive * ", // match the file name prefix with jquery. unobtrusive "~ /Scripts/jquery. validate *"));...

UseCDN

Copy codeThe 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 fails or cannot be accessed, the local resource file will be selected here. The mvc under debug will show us his original mask, which is very beneficial for debugging.