Scottgu Chinese Blog: support for new bundling and downgrading (ASP. NET 4.5 Series)

Support for new bundling and downgrading (ASP. NET 4.5 Series)

By devdivchina

[Original article address] New bundling and minification support (ASP. NET 4.5 Series)

[Original article posting time]

This is the sixth blog in my ASP. NET 4.5 series.

The next release of. NET and Visual Studio contains many new features and functions. In ASP. NET 4.5, you will see a lot of excellent improvements on web forms and MVC, as well as improvements on the ASP. NET core infrastructure of the two.

Today's blog covers some of the work we have done in ASP. NET to add built-in support for bundling and downgrading, which will facilitate the performance of applications. This function is available for all ASP. NET applications, including ASP. net mvc and ASP. NET web forms solutions.

Basic knowledge of bundling and downgrading

As more and more people use mobile devices to surf the web, it becomes more and more important to make websites and constructed applications cooperate well with each other. We have tried loading the website on a smartphone-but finally gave up, because it is loading slowly on a slow mobile phone network. If your website or application load is slow, you may lose potential customers due to poor performance. Even with powerful desktops, the loading time and performance of websites have a great impact on customers.

Today, most websites use multiple JavaScript and CSS files to separate files and keep code compact. From the encoding perspective, this is a good practice, but it often brings negative effects to the overall performance of the website. Multiple JavaScript and CSS files require multiple HTTP requests from the browser, which in turn reduces performance.

Simple Example

Next, I opened a local website in ie9 and recorded network traffic using the F12 development tool built in IE, as shown below, this website contains five CSS and four JavaScript files that must be loaded by the browser. At present, each file is sent separately by the browser and the result is returned by the server. The time required is proportional to the number of files, so there is no doubt that this process will take a lot of time.

Bundling

ASP. NET is adding new functions to easily "bundle" or "merge" multiple CSS and JavaScript files to fewer HTTP requests. This allows the browser to request fewer files, which in turn reduces the time required to obtain them. The following is a version updated in the preceding example. It makes full use of the new bundling feature (only one request is required for JavaScript and CSS)

 

Currently, the browser only needs to send a small number of requests to the server. The content of a single file is bundled/merged into the same response, but the content of the file remains unchanged. Therefore, the size of the entire file is the same as that before bundling. However, even on the local development machine (the network latency between the browser and the server is the smallest), binding CSS and JavaScript files can still reduce the overall page loading time by 20%. Performance Improvement for slow networks will be more obvious.

Zoom out

Some new functions are added to the next ASP. net release to reduce or reduce the size of the downloaded content. This is the process of removing spaces, comments, and other unnecessary characters from CSS and JavaScript. This will make the file smaller, and the download and loading in the browser will be faster. The following table shows the performance improvements when bundling and downgrading are used:

 

Even on my local development machine (with the smallest network latency), we can now improve the performance by 40% from the initial startup. In a slow network (especially international customers), performance gains will increase.

Use bundling and downgrading inside ASP. NET

ASP. NET, which will be released soon, makes full use of the bundling and downsize of the project, and shows the performance benefits in the above solutions. It does not need to run the custom tool-Asp. NET added runtime support to dynamically execute bundling/downgrading (cache results to determine performance is good ). This makes a truly clean development experience and provides real convenience for using these new features.

Suppose we have a simple project that contains four JavaScript files and six CSS files:

Bundle and shrink. CSS file

Suppose you want to reference all the style sheets in the above "styles" folder. Now you have to add multiple CSS references to get them -- this will convert to 6 separate HTTP requests:

The new bundle/zoom-out feature allows you to bundle and zoom out all the styles folder. CSS file-send a URL request to a folder ("styles" in this example) and append the "/CSS" path to it. For example:

This will enable asp.netscan to bundle and compress the. CSS file, and then return an HTTP Response containing all the CSS content sent to the browser.

You do not have to run any tool or Preprocessor to do this. This will allow you to clearly separate cssinto a single logical. CSS file, to maintain a very clean development experience-without affecting performance at runtime. At the same time, the Visual Studio designer will set up new bundling/narrowing logics-so that you will still get a wyswiyg designer experience within.

Bundling and downgrading JavaScript files

Like the preceding CSS method, if we want to bind and contract all JavaScript code to a single response, we can send a URL request to the folder ("scripts" in this example "), append the "/JS" path to it:

This will enable ASP. NET to scan the directory, bundle and narrow down the. js file, and then return an HTTP Response containing all the javascript content sent to the browser. Again -- do not need custom tools or build steps to do this. It applies to all browsers.

Sort files in the bundle

By default, files are bundled by ASP. NET in alphabetical order, as they are displayed in Solution Explorer. They are then automatically moved forward and backward, so that known libraries and custom extensions like jquery, mootools, and dojo can be loaded before other files. The default sorting of the bindings in the scripts folder is as follows:

1. Jquery-1.6.2.js
2. Jquery-ui.js
3. Jquery. Tools. js
4. A. js

CSS files are also sorted. After moving, the reset.css and normalize.css (if they exist) can be loaded before other files. So the default sorting of styles folder bundling is as follows:

1. Reset.css
2. Content.css
3. Forms.css
4. Globals.css
5. Menu.css
6. Styles.css

However, sorting is completely customizable and can be changed to suit most usage cases and any common naming patterns you like. However, the objective of out-of-box experience is to use smart default sorting.

Supports any number of directories/subdirectories

In the application in the preceding example, we only have a single folder-"scripts" and "styles ". This applies to some application types (such as a single page application ). However, in applications, you often need multiple CSS/JS bindings-for example, a "generic" bundle to include the core JS and CSS files used by all pages, then there is a file that is not used globally, such as a specific page or a specific part.

You can bundle/narrow down any number of directories or subdirectories in the project-this will make it easier to construct code and maximize the benefits of bundling/downgrading. By default, each directory can be accessed as a separate URL.

Bundling/downgrading scalability

Remember: ASP. NET bundling and downgrading support scalability. In addition, each part of the process can be expanded or replaced.

Custom Rules

In addition to allowing external directory-based bundling methods, ASP. NET also supports registering custom bindings by using new APIs that we will publish soon.

The following code demonstrates how to use the code to register a "customscript" bundle in the global. asax class of the application. The API allows you to add/delete/filter bundled files at a very detailed level:

The above custom bundle can be referenced anywhere in the application. Use the following <SCRIPT> reference:

Custom Process

You can also overwrite the default CSS and JavaScript bindings to support custom processes of your own bundled files (for example, custom narrowing rules, supporting SaaS, less or coffeescript syntax, and so on ).

In the above example, we point out that we want to replace the built-in zoom-in conversion with the custom myjstransform and mycsstransform classes. They belong to the CSS and JavaScript reducers respectively, and can add additional features:

The final result of this scalability is that you can add the bundling/narrowing logic at a deep level and do something really cool.

Bind and Contract A 2-minute video

Mads Kristensen has a great 90-second video that shows how to use the new bundle/zoom-out feature. You can click here to watch the 90-second video.

Summary

The new bundling and narrowing support in the next release of ASP. NET will make it easier to build a fast web application. It is really easy to use and won't make a big change to your existing development workflow. It also supports a wide range of scalable APIs to allow you to customize what you want.

In the application-Based ASP. net mvc, ASP. NET web forms, and ASP. NET web pages, you can easily use this new support.

Hope this will help you

Scott

Note: In addition to blogs, I use Twitter to quickly post blog posts and share links. My Twitter is@ Scottgu

 

 

View this post online.