Asp. Net MVC using bundle to merge and compress JS and CSS files

Time:2022-1-13

preface

Before introducing the formal content of this article, first quote a paragraph from the decade of Taobao technology. Anyone with a little knowledge of the web front end should know that the browser will load CSS, JS (JavaScript), pictures and other styles, scripts and resource files used in the page in the next step. However, relatively few people may know that the number of resources loaded concurrently by your browser under the same domain name is limited. For example, IE 6 and IE 7 are two, IE 8 is six, and the chrome versions are different, usually 4 ~ 6. Bundle is ASP Net 4.5 is a new feature that can be used to compress JS and CSS (multiple files can be packaged into one file or combined into multiple files), and can distinguish between debugging and non debugging. During debugging, it is not compressed and displayed in the original way to facilitate problem finding. Let’s take a look at the detailed introduction.

An example

New ASP Net MVC project, in app_ In the start folder, you can see a file called bundleconfig Class of CS,

Such contents are as follows:


public class BundleConfig
 {
 // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));

 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  "~/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 ScriptBundle("~/bundles/bootstrap").Include(
  "~/Scripts/bootstrap.js",
  "~/Scripts/respond.js"));

 bundles.Add(new StyleBundle("~/Content/css").Include(
  "~/Content/bootstrap.css",
  "~/Content/site.css"));
 }
 }

As shown in the above code, there are two kinds of objects: scriptbundle and stylebundle.


namespace System.Web.Optimization
{
 //
 // Summary:
 // Represents a bundle that does Js Minification.
 public class ScriptBundle : Bundle
 {
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes a virtual path for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 public ScriptBundle(string virtualPath);
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes virtual path and cdnPath for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 //
 // cdnPath:
 // The path of a Content Delivery Network (CDN).
 public ScriptBundle(string virtualPath, string cdnPath);
 }
}

Scriptbundle has two constructors, VirtualPath: the virtual path of JS file and cdnpath: the network CDN path of JS. The parameters of the constructor of stylebundle are the same as those of scriptbundle.

In the code snippet above, you can see

  • jquery-{version}. JS: where version is the version number of jQuery, and version is a placeholder for the version number.
  • jquery. Validate *: * wildcard, matching all.

After the above code is completed, it needs to be in global Application of asax_ Register it in the start event.

How to use?

In the view, the reference to the static file is realized through the following code.

browse

Why didn’t it work? By default, bundle does not enable package compression when debugging. It can be enabled in the following 2 ways.

Browse again

You will find jquery-1.10.2 JS the file no longer exists in the request. It has been packaged and compressed in jQuery? V = version number, which is in this file.

Another way to open package compression is on the web In config file:

summary

The above is an introduction to the usage of bundle. Packaging and compressing static files can reduce the number of requests and the speed of resource loading. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for developpaer.

Recommended Today

W3C tutorial (16): other W3C activities

This section provides an overview of other important and interesting W3C activities.This section provides an overview of other important and interesting W3C activities. Web Accessibility Initiative (WAI) Wai defines guidelines on how to make web content easier for people with disabilities.Wai strives for the goal of “web accessibility for all” through technology, guidelines, tools, education, […]