Pack.net javascript css bundling and minification

2014/11/014 min read
bookmark this
Responsive image

Table of Contents

  1. What's this?
  2. Source Code and interface
  3. Modules Dependencies
  4. support features
  5. main logic
  6. others
  7. not support features
  8. Example
  9. Unit Test
  10. Reference
  11. What!
  12. What's Next

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 markup)
IHtmlString CssInline(Func 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/

  1. PrefixBundleCssTildeName

default value: ~/content/Common/css/

  1. EnableBundleKey

default value: lndk

  1. 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

    @Bundle.JsInline(
    @
    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
    }
    )
  • Bundle Internal Style Sheet

    @Bundle.CssInline(
    @
        .iphone-back
        {
            /* The back side is flipped 180 deg by default */
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            background-position: right center;
        }
    )

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](https://www.asp.net/mvc/overview/performance/bundling-and-minification)

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.