Javascript/CSS packaging and compression functions of ASP. net mvc 4 RC

Packaging and compression (minification) means to Package Multiple JS files or CSS files into a single file and compress them, this reduces the browser's need to download multiple file cases to complete the webpage display latency, at the same time, by removing the blank space in the JS/CSS file case, annotating and modifying the compression methods of JavaScript internal functions and variable names, the file size can be effectively reduced and the transmission efficiency can be improved, provides a smoother user experience.

In ASP. net mvc 4, you can use bundletable to bundle multiple CSS files and JS files to speed up network loading and page parsing. More importantly, bundling can solve the restrictions on connecting 31 CSS files in IE browsers. Some Open Source JavaScript controls are often used in ASP. NET projects. Adding reference to CSS and JavaScript files virtually. If you manually merge these CSS files, it will cause a lot of trouble for future version upgrades. Therefore, we had to carefully handle the reference of these CSS files on the page. ASP. NET bundling is a new feature of ASP. NET 4.5. It is under the System. Web. Optimization namespace. He provides some ASP. NET runtime performance optimizations. For example, a page may have many CSS/JS/images. By flexibly applying the bundletable class, he can help you merge and compress files.CodeOptimized to an ideal file and then output it to the client, which improves the download speed of the browser.

Now, we finally have a relatively perfect solution to solve the problems caused by CSS files and comprespt files. The bundletable bundling technology can solve this problem well.

In the ASP. net mvc 4 beta era, the packaging and compression functions have been built in. The practice is to add them to application_start of Global. asax. CS.

Bundletable. Bundles. enabledefaultbundles ();

In this way, you can package and compress all the CSS files in the JS and contents directories in the entire scripts directory into a single file in one breath to improve the loading efficiency of webpages: (reference)

<SCRIPT src = "@ URL. Content ("~ /Scripts/JS ")" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "@ URL. Content ("~ /Content/CSS ")" type = "text/JavaScript"> </SCRIPT>

I recently looked at ASP. NET MVC 4 RC and found that RC has made some innovations in packaging and compression practices, making it more flexible and organized.

The original packaging rule is hidden in global. asax. in CS application_start, the RC version has a new directory named app_start, which includes routeconfig. CS, filterconfig. CS, bundleconfig. CS is started by webactivator. The new system configuration removes the registration logic such as routing rules, filters, and packaging rules from application_start and stores them in independent file cases. The management and modification are clear and the architecture is more beautiful.

The default content of bundleconfig. CS is as follows:

Using system. Web;

Using system. Web. optimization;

Namespace mymvcapplicaiton

{

Public class bundleconfig

{

Public static void registerbundles (bundlecollection bundles)

{

Bundles. Add (New scriptbundle ("~ /Bundles/jquery "). Include (

"~ /Scripts/jquery-1 .*"));

Bundles. Add (New scriptbundle ("~ /Bundles/jqueryui "). Include (

"~ /Scripts/jquery-UI *"));

Bundles. Add (New scriptbundle ("~ /Bundles/jqueryval "). Include (

"~ /Scripts/jquery. unobtrusive *",

"~ /Scripts/jquery. Validate *"));

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 "));

}

}

}

A big difference from the beta era is that JS and CSS are grouped to define jquery, jqueryui, jqueryval, modernizr, CSS, themes/base/CSS, and other groups respectively, allows the webpage to load only necessary JS and CSS file groups as needed. Unlike the previous packaging of the entire directory, the loading sequence and dependency of JS files can also be more precise.

In. cshtml, Styles. Render and scripts. Render are used to load the JS and CSS groups defined by bundleconfig. cs. For example:

<! Doctype HTML>

<HTML>

<Head>

<Meta charset = "UTF-8"/>

<Meta name = "viewport" content = "width = device-width"/>

<Title> @ viewbag. Title </title>

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

@ Scripts. Render ("~ /Bundles/modernizr ")

@ Scripts. Render ("~ /Bundles/jquery ","~ /Bundles/jqueryui ",

"~ /Bundles/jqueryval ")

@ Rendersection ("scripts", required: false)

</Head>

<Body>

@ Renderbody ()

</Body>

</Html>

Next, let's take a test. Make a simple index. cshtml, with only one <div> Hello </div> line in the middle, and test it with the above _ layout. cshtml.Source codeAs shown below, CSS and JS files are separated one by one, and are not compressed without packaging?

<! Doctype HTML>

<HTML>

<Head>

<Meta charset = "UTF-8"/>

<Meta name = "viewport" content = "width = device-width"/>

<Title> </title>

<Link href = "/content/themes/base/jquery.ui.core.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.resizable.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.selectable.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.accordion.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.autocomplete.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.button.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.dialog.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.slider.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.tabs.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.datepicker.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.progressbar.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/themes/base/jquery.ui.theme.css" rel = "stylesheet" type = "text/CSS"/>

<Link href = "/content/site.css" rel = "stylesheet" type = "text/CSS"/>

<SCRIPT src = "/scripts/modernizr-2.0.6-development-only.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/scripts/jquery-1.6.2.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/scripts/jquery-ui-1.8.11.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/scripts/jquery. unobtrusive-ajax.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/scripts/jquery. Validate. js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/scripts/jquery. Validate. unobtrusive. js" type = "text/JavaScript"> </SCRIPT>

</Head>

<Body>

<Div> Hello </div>

</Body>

</Html>

Originally, this is the intimacy of scriptbundle and stylebundle. In the debugging mode, CSS and JS are displayed, so that developers can check the source code for problems and debugging. To learn about the packaging and compression effects, set <compilation DEBUG = "false" targetframework = "4.0"/>.

After the debug mode is disabled, the source code of the web page becomes as follows. A group has only one <link> or <SCRIPT>, while href and SRC direct to/content/CSS? V = ji3nxsakwko... (Including the hash code parameters to ensure that only the new version is loaded when the file case changes) format links, return the package and Compressed Content of multiple file cases:

<! Doctype HTML>

<HTML>

<Head>

<Meta charset = "UTF-8"/>

<Meta name = "viewport" content = "width = device-width"/>

<Title> </title>

<Link href = "/content/themes/base/CSS? V = um62... omitted "rel =" stylesheet "type =" text/CSS "/>

<Link href = "/content/CSS? V = ji3n... "rel =" stylesheet "type =" text/CSS "/>

<SCRIPT src = "/bundles/modernizr? V = xgae... "type =" text/JavaScript "> </SCRIPT>

<SCRIPT src = "/bundles/jquery? V = 3awa... "type =" text/JavaScript "> </SCRIPT>

<SCRIPT src = "/bundles/jqueryui? V = bmdf... "type =" text/JavaScript "> </SCRIPT>

<SCRIPT src = "/bundles/jqueryval? V = ufe7... "type =" text/JavaScript "> </SCRIPT>

</Head>

<Body>

<Div> Hello </div>

</Body>

</Html>

Finally, the performance difference between the two is measured:

Before packing and compressing the file, you need to send 20 requests to load the webpage, and transmit a total of 5,992 + 812,541 = 818,533 bytes of data.

After packaging and compression, the number of requests is reduced to 7, and the data transmission volume is also reduced to 2,274 + 352,454 = 354,728 bytes. The data transmission volume is only 43.33% of the original size!

Do not forget this useful mechanism when developing ASP. net mvc 4 projects.

Finally, we will introduce the extended library of system. Web. Optimization http://bundletransformer.codeplex.com/, which is recommended in Asp.net MVC 4 Project.

Http://www.codeproject.com/Articles/395143/JavascriptHelper-Managing-JS-files-for-ASP-NET-MVC