Bundler: client-side Javascript optimization in ASP.NET

    imageToday, when developing applications on the Internet, the issue of client optimization arises more and more often. If earlier, the page sent to the client contained only information, today very often such a page contains a lot of JavaScript code. To achieve the best performance and reduce server load, client optimization rules apply.

    This article is about Bundler, a convenient JavaScript client-side optimization tool for .net projects.

    Introduction


    Client optimization regarding JavaScript involves the following actions:
    • JavaScript code minimization using appropriate tools: YUI Minifier , Microsoft JsMin , Google Closure , etc .;
    • reducing the number of requests to static files (including JavaScript) by reducing their number, combining several files into one;
    • caching static files (including JavaScript) on the client side;
    • GZip-compression of traffic between the client and server.
    The first rule reduces the size required for transmission from the server to the client, which reduces the load on the server and relieves communication channels. The second rule reduces the number of requests to the server, which allows the user's browser to reduce the time required to render the page.

    Caching JavaScript files (as well as any other static files) allows the browser not to request data from the server, using previously downloaded files from its own cache.

    Using GZip compression to transfer data between the client and the server can significantly reduce the amount of transmitted traffic, which will be compressed by the server and unpacked on the client’s browser. GZip compression can be enabled on the IIS server (Fig. 1).

    clip_image001
    Fig. 1. Enabling Compression on IIS 7.5

    This article will focus on applying the first two rules in ASP.NET using the new Bundler tool . The organization of caching JavaScript files on the client side and the subtleties of setting traffic compression on the IIS server are beyond the scope of this article and will not be considered.

    Bundler


    Bundler is a solution that allows you to simply and transparently apply the rules for minimizing and combining JavaScript files. In addition, the Bundler contains a number of useful features that can make it easier for you to work with client-side JavaScript optimization.

    The Bundler is written by Justin Etheredge, the author of the CodeThinked blog , here and here you can read copyright articles on the topic of his utility. To start using Bundler you need to download the source package from the page on GitHub . After loading the downloaded project into Visual Studio, you need to compile the Bundler.Framework project . As a result, we get the assembly Bundler.Framework.dll, the application of which will be discussed later.

    Bundler Application


    To demonstrate the use of the Bundler, I will use the ASP.NET MVC project (in Visual Studio 2010 RC), which is created by default (RC version). By default, the project does not use client validation. Add it to the registration form by specifying <% Html.EnableClientValidation () before the form ; %> (Fig. 2).

    clip_image002
    Fig. 2. Registration form with client validation enabled.

    In order for the form validation on the client to work, it is necessary to connect several JavaScript files. Add the necessary files to Site.Master (Fig. 3)

    clip_image003
    Fig. 3. Adding scripts to Site.Master

    Run and make sure that client validation works as it should. However, we are faced with several questions: firstly, we connected scripts for release and it will not be convenient to use them at the debugging stage. And secondly, based on the rules of client optimization, we would not want to force the client to request as many as three scripts at once. Instead of looking for our solutions, we will use the Bundler .

    By connecting the Bundler.Framework.dll assembly to our project, we can immediately use all the features of Bundler. We rewrite the code for using scripts using the Bundler functional (Fig. 4).

    image
    Fig. 4. Inclusion of scripts in Bundler

    Run the project and see what happened in the end. Having looked at the source codes of the page in the browser, we will see that the scripts are still rendered separately (Fig. 5).

    image
    Fig. 5. The result of the Bundler working in Debug mode.

    This behavior is actually one of the useful functions of the Bundler. When you build a project in Debug mode, the Bundler does not process scripts and allows you to display them unchanged. We will take advantage of this and slip the debug version of the scripts to it, and at the same time turn off the debugging for our project by setting debug = "false" in web.config. We will compile and run, we will again look at the resulting markup (Fig. 6).

    image
    Fig. 6. The result of the Bundler without debugging.

    For fun, let's look at the resulting code AjaxBundle.js (Fig. 7).

    image
    Fig. 7. The result of the Bundler work.

    As you can see, even though we used debug versions of scripts for client validation, Bundler independently not only combined them together into one file, but also squeezed the contents eliminating unnecessary spaces and comments.

    Note that to query the generated file, the Bundler uses the internal parameter r, which is assigned the string value of the current time. This parameter is used to definitely set the versionedness of the generated script assembly. Without versioning, the browser can cache the script of the same name of the old version without important changes and updated functionality on the client will not be available.

    Conclusion


    In this article, we examined the work of Bundler, a mechanism that helps flexibly implement several useful practices of client optimization. Firstly, Bundler compresses JavaScript files, and secondly, combines them into one common file.

    Bundler supports the automatic generation and versioning of JavaScript output files. In addition, the Bundler takes into account the current build mode of the project and, in the case of the debug version, allows working with source scripts without changing them.

    The Bundler seems to be a very useful tool to pay attention to. The project is distributed with open source code and you can supplement it at your own request by adding the necessary functionality.

    If you are looking for a solution to optimize the work with many JavaScript files in your project, then the Bundler would be a good choice.

    References

    Progg it

    Also popular now: