Javascript, CSS Bundling and Minification

This's project that I'm trying to create bundling and minification library for ASP.NET application.

What's this?

There're just a lots of benefit if we use this, but I try to list all the things I could come out. * Bundling* will have following benefit to the site.

• improve request load time. browsers have limit connection. If you have 20 script, broswer could only load certain number, let's say 6 at a time.
• reducing the number of request to the server.
• reducing the size of requested CSS and Javascript.
• protect source code Javascript and CSS.
• reduce potential problem which some browser imposes a maximum limit of request(CSS, JS).
• able to create modulized javascript.
• able to better organize javascript and css.

---

By default, Bundle will always bundle javascript and css if used the new method, production mode, which minified version.

However, if pass the EnableBundleKey and EnableBundleValue from request, will be development mode, which unminified version.

---

Unlike the default ASP.NET Global Bundle, * Bundle* focus using at the razor(.cshtml). However Bundle will still support existing ASP.NET Global Bundle, which you include all the bundle(js or css) at C#. The cons for this is, if you site will never have lots of javascript or css, this solution will works good for you. However, that's not good building a modern, enterprise web application. You'll have global javascript and css files which are

using all the pages on your site. You'll also want to choose different javascript and css files depend on page or module.

Source Code and interface

Basically, we still use the .NET defautl bundle, which they reference from System.Web.Optimization. file under /Helpers/Bundle.cs

IHtmlString Js(params string[] files)
IHtmlString Css(params string[] files)
IHtmlString JsInline(Func<object, object> markup)
IHtmlString CssInline(Func<object, object> markup)

Modules Dependencies

dependencies Dll

1. WebGrease.dll (1.5.2.14234)
2. System.Web.Optimization.dll (1.1.0.0)

dependencies Application Config setting

1. PrefixBundleBasicTildeName
   • default value: ~/bundles/
2. PrefixBundleCssTildeName
   • default value: ~/content/Common/css/
3. EnableBundleKey
   • default value: lndk
4. EnableBundleValue
   • default value: g

support features

main logic

• Bundle GLobal level (Js & CSS) - done!
• Bundle Individual Page, Module Level (Js & CSS) - done!
• Bundle Inline Javascript - done!
• Bundle Internal Style Sheet - done!

others

• turn development mode on via querystring

not support features

• not support use ASP.NET MVC razor "section"
• only support generic bundle url name, client(razor) can't pass their own name.

Example

• Bundle GLobal level (Js & CSS)

  @Bundle.Css("~/Content/Common/CSS/bootstrap.min.css", 
  "~/Content/Common/themes/smoothness/jquery-ui-1.10.4.custom.min.css", 
  "~/Content//CSS/.css", 
  "~/Content//CSS/Responsive/_Responsive.css")
  

• Bundle Individual Page, Module Level (Js & CSS)

  @Bundle.Js("~/Scripts//modules/myjavascript.js")
  

• Bundle Inline Javascript

<script\>

    <script type="text/javascript">
    @Bundle.JsInline(
    @<text>
    var MYAPP = MYAPP || {};
    MYAPP.commonMethod = {
        regExForName: "", // define regex for name validation
        regExForPhone: "", // define regex for phone no validation
        validateName: function (name) {
            // Do something with name, you can access regExForName variable
            // using "this.regExForName"
        },

        validatePhoneNo: function (phoneNo) {
            // do something with phone number
        }
    }

    // Object together with the method declarations
    MYAPP.event = {
        addListener: function (el, type, fn) {
            //  code stuff
            return el * type * fn;
        },
        removeListener: function (el, type, fn) {
            // code stuff
            return el - type + fn;
        },
        getEvent: function (e) {
            // code stuff
            e = e + '';
        }

        // Can add another method and properties
    }
    </text>)
    <script>

 

• Bundle Internal Style Sheet

<script\>

    <style type="text/css">
    @Bundle.CssInline(
    @<text>
        .iphone-back
        {
            /* The back side is flipped 180 deg by default */
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            background-position: right center;
        }
    </text>)
    </style>

 

Unit Test

need to write unit test against to /Helpers/Bundle.cs, for testing the main function.

Reference

Blog - ASP.NET Bundling and Minification

Community- Browser Simultaneous Connections

Blog - Bundling with SiteCore MVC

Library

What! 

• Shouldn't we turn development mode off at production? 

What's Next

Although I build above Javascript, CSS Minification module in C# and able to use at .cshtml. I think should use Grunt & Gulp for client side assets build.