JavaScript动态减肥

JavaScript动态减肥

随着Ajax的流行，越来越多的JavaScript被用到页面中，一个页面调用js文件大小超过500k都不稀奇了。这么大的带宽会给用户和网络带来诸多不便。其实我们都知道JavaScript及html都有很多空间是多余的。比如white space，网上有一些方案，比如JS Code Compressor。透过这个WinForm工具可以压缩文件大小到原来的一半左右。但如果我们每次deploy,或者用到了动态的js，这个技术就要修改了。我参考了JS Code Compressor v.1.0.3，把所有东西都放到一个页面里去。这样可以通过调用单个页面来实现动态调用压缩后的文件的效果。

比如原来的文件可以通过/path/to/script.js来访问。我们现在建立一个Compress.aspx文件。去掉page source中除了第一行外所有东西。在code behind中加入：

     parameters, variables #region parameters, variables

    private const int CODEPAGE = 1254;

    /**//// <summary>
    /// remove C-style comments and multi-line comments.
    /// </summary>
    private bool removeComments = true;

    /**//// <summary>
    /// trim lines and remove multiple blank lines.
    /// </summary>
    private bool removeAndTrimBlankLines = true;

    /**//// <summary>
    /// remove all CRLF characters.
    /// </summary>
    private bool removeCarriageReturns = true;

    /**//// <summary>
    /// skim the rest of the code.
    /// </summary>
    private bool removeEverthingElse = true;

    /**//// <summary>
    /// Matches /* c-style comments.
    /// */
    /// </summary>
    private Regex regCStyleComment;

    /**//// <summary>
    /// Matches //line comments.
    /// </summary>
    private Regex regLineComment;

    /**//// <summary>
    /// Matches any white space including CRLF at the end of line.
    /// </summary>
    private Regex regSpaceLeft;

    /**//// <summary>
    /// Matches any whitespace at the beginning of the line.
    /// </summary>
    private Regex regSpaceRight;

    /**//// <summary>
    /// Matches any space-tab combination.
    /// </summary>
    private Regex regWhiteSpaceExceptCRLF;

    /**//// <summary>
    /// Quotes and regular expressions.
    /// </summary>
    private Regex regSpecialElement;

    /**//// <summary>
    /// Matches opening curly brace "{".
    /// </summary>
    private Regex regLeftCurlyBrace;

    /**//// <summary>
    /// Matches closing curly brace "}".
    /// </summary>
    private Regex regRightCurlyBrace;

    /**//// <summary>
    /// Matches a comma surrounded by whitespace characters.
    /// </summary>
    private Regex regComma;

    /**//// <summary>
    /// Matches a semi-column surrounded by whitespace characters.
    /// </summary>
    private Regex regSemiColumn;

    /**//// <summary>
    /// Matches CRLF characters.
    /// </summary>
    private Regex regNewLine;

    private Regex regCarriageAfterKeyword;

    /**//// <summary>
    /// Hashtable to store the captured special elements.
    /// </summary>
    private Hashtable htCaptureFields;

    /**//// <summary>
    /// Hashtable to store pre-compiled regular expressions for special elements.
    /// </summary>
    private Hashtable htRegSpecialElement;

    /**//// <summary>
    /// The total number of special elements captured.
    /// </summary>
    private int specialItemCount;

    /**//// <summary>
    /// If <code>true</code> comments will be removed.
    /// Default value is <code>true</code>.
    /// </summary>
    public bool RemoveComments
    ...{
        set
        ...{
            removeComments = value;
        }
    }

    /**//// <summary>
    /// If <code>true</code> lines will be trimmed and multiple blank
    /// new lines will be removed.
    /// Default value is <code>true</code>.
    /// </summary>
    public bool TrimLines
    ...{
        set
        ...{
            removeAndTrimBlankLines = value;
        }
    }

    /**//// <summary>
    /// If <code>true</code> all CRLF characters will be removed.
    /// Default value is <code>true</code>.
    /// </summary>
    public bool RemoveCRLF
    ...{
        set
        ...{
            removeCarriageReturns = value;
        }
    }

    /**//// <summary>
    /// If <code>true</code> some additional compression will be done.
    /// Default value is <code>true</code>.
    /// </summary>
    public bool RemoveEverthingElse
    ...{
        set
        ...{
            removeEverthingElse = value;
        }
    }
    #endregion

     protected   void  Page_Load( object  sender, EventArgs e)
     ... {
        /**//* initialize members */

        regCStyleComment = new Regex("//*.*?/*/", RegexOptions.Compiled | RegexOptions.Singleline);
        regLineComment = new Regex("//.* ", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regSpaceLeft = new Regex("^/s*", RegexOptions.Compiled | RegexOptions.Multiline);
        regSpaceRight = new Regex("/s*/r/n", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regWhiteSpaceExceptCRLF = new Regex("[ /t]+", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regSpecialElement = new Regex(
            ""[^"/r/n]*"|'[^'/r/n]*'|/[^//*](?<![//S]/.)([^r/n]|//.)*/(?=[ig]{0,2}[^/S])",
            RegexOptions.Compiled | RegexOptions.Multiline);
        regLeftCurlyBrace = new Regex("/s*{/s*", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regRightCurlyBrace = new Regex("/s*}/s*", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regComma = new Regex("/s*,/s*", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regSemiColumn = new Regex("/s*;/s*", RegexOptions.Compiled | RegexOptions.ECMAScript);
        regNewLine = new Regex("/r/n", RegexOptions.Compiled | RegexOptions.ECMAScript);

        regCarriageAfterKeyword = new Regex(
            "/r/n(?<=/b(abstract|boolean|break|byte|case|catch|char|class|const|continue|default|delete|do|double|else|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|while|with)/r/n)",
            RegexOptions.Compiled | RegexOptions.ECMAScript);

        htCaptureFields = new Hashtable();
        htRegSpecialElement = new Hashtable();

        specialItemCount = 0;

        //return a javascript file contains compressed vesion of javascript
        Response.Write(Compress(Script));
    }

     /**/ /// <summary>
    /// Compresses the given String.
    /// </summary>
    /// <param name="toBeCompressed">The String to be compressed.</param>
     public   string  Compress( string  toBeCompressed)
     ... {
        /**//*clean the hasthable*/
        htCaptureFields.Clear();
        htRegSpecialElement.Clear();
        specialItemCount = 0;

        /**//* mark special elements */
        MarkQuotesAndRegExps(ref toBeCompressed);

        if (removeComments)
        ...{
            /**//* remove line comments */
            RemoveLineComments(ref toBeCompressed);
            /**//* remove C Style comments */
            RemoveCStyleComments(ref toBeCompressed);
        }

        if (removeAndTrimBlankLines)
        ...{
            /**//* trim left */
            TrimLinesLeft(ref toBeCompressed);
            /**//* trim right */
            TrimLinesRight(ref toBeCompressed);
        }

        if (removeEverthingElse)
        ...{
            /**//* { */
            ReplaceLeftCurlyBrace(ref toBeCompressed);
            /**//* } */
            ReplaceRightCurlyBrace(ref toBeCompressed);
            /**//* , */
            ReplaceComma(ref toBeCompressed);
            /**//* ; */
            ReplaceSemiColumn(ref toBeCompressed);
        }

        if (removeCarriageReturns)
        ...{
            /**//*
             * else[CRLF]
             * return
             */
            ReplaceCarriageAfterKeyword(ref toBeCompressed);
            /**//* clear all CRLF's */
            ReplaceNewLine(ref toBeCompressed);
        }

        /**//* restore the formerly stored elements. */
        RestoreQuotesAndRegExps(ref toBeCompressed);

        StringBuilder buffer = new StringBuilder();

        buffer.Append(
            " /* Code Compressed with JS Code Compressor v.1.0.3 - http://www.sarmal.com/ modified by author at http://blog.youkuaiyun.com/snleo */"
        );

        buffer.Append(toBeCompressed);
        return buffer.ToString();
    }

     supporting functions #region supporting functions
    /**//// <summary>
    /// Replaces the stored special elements back to their places.
    /// </summary>
    /// <param name="input">The input String to process.</param>
    private void RestoreQuotesAndRegExps(ref String input)
    ...{
        int captureCount = htCaptureFields.Count;
        for (int i = 0; i < captureCount; i++)
        ...{
            input = ((Regex)htRegSpecialElement[i]).Replace(input, (String)htCaptureFields[i]);
        }
    }

    /**//// <summary>
    /// Quotes and regular expressions should be untouched and unprocessed at all times.
    /// So we mark and store them beforehand in a private Hashtable for later use.
    /// </summary>
    /// <param name="input">The input String to process. It should be a single line.</param>
    private void MarkQuotesAndRegExps(ref String input)
    ...{
        MatchCollection matches = regSpecialElement.Matches(input);

        int count = matches.Count;
        Match currentMatch;

        /**//* store strings and regular expressions */
        for (int i = 0; i < count; i++)
        ...{
            currentMatch = matches[i];
            htCaptureFields.Add(specialItemCount, currentMatch.Value);
            /**//* we added one more special item to our Hashtable */
            specialItemCount++;
        }

        /**//* replace strings and regular expressions */
        for (int i = 0; i < count; i++)
        ...{
            /**//*
             * compile and add the Regex to the hashtable
             * so that it executes faster at the Restore phase.
             *
             * A trade off between Regex compilation speed and
             * memory.
             */
            htRegSpecialElement.Add(i, new Regex("____SPECIAL_ELEMENT____" + (i) + "____",
                RegexOptions.ECMAScript | RegexOptions.Compiled));

            input = regSpecialElement.Replace(input, "____SPECIAL_ELEMENT____" + (i) + "____", 1);
        }
    }

    /**//// <summary>
    /// Removes any multi-line single line /* c style comments */
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void RemoveCStyleComments(ref String input)
    ...{
        input = regCStyleComment.Replace(input, "");
    }

    /**//// <summary>
    /// Removes all /line comments.
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void RemoveLineComments(ref String input)
    ...{
        input = regLineComment.Replace(input, "");
    }

    /**//// <summary>
    /// Replaces any duplicate space-tab combinations with a single space.
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceDuplicateWhiteSpace(ref String input)
    ...{
        input = regWhiteSpaceExceptCRLF.Replace(input, " ");
    }

    /**//// <summary>
    /// Trims all the trailing whitespace characters in a line with "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void TrimLinesLeft(ref String input)
    ...{
        input = regSpaceLeft.Replace(input, "");
    }

    /**//// <summary>
    /// Trims all whitespace after the end of the line, and the proceeding CRLF characters
    /// with a single CRLF.
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void TrimLinesRight(ref String input)
    ...{
        input = regSpaceRight.Replace(input, " ");
    }

    /**//// <summary>
    /// Replaces any whitespace before and after "{" characters with "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceLeftCurlyBrace(ref String input)
    ...{
        input = regLeftCurlyBrace.Replace(input, "{");
    }

    /**//// <summary>
    /// Replaces any whitespace before and after "}" characters with "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceRightCurlyBrace(ref String input)
    ...{
        input = regRightCurlyBrace.Replace(input, "}");
    }

    private void ReplaceCarriageAfterKeyword(ref String input)
    ...{
        input = regCarriageAfterKeyword.Replace(input, " ");
    }

    /**//// <summary>
    /// Replaces any whitespace before and after "," characters with "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceComma(ref String input)
    ...{
        input = regComma.Replace(input, ",");
    }

    /**//// <summary>
    /// Replaces any whitespace before and after ";" characters with "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceSemiColumn(ref String input)
    ...{
        input = regSemiColumn.Replace(input, ";");
    }

    /**//// <summary>
    /// Replaces all CRLF characters in the input to "".
    /// </summary>
    /// <param name="input">The input String to replace.</param>
    private void ReplaceNewLine(ref String input)
    ...{
        input = regNewLine.Replace(input, "");
    }

    #endregion

     /**/ /// <summary>
    /// Get the script and return as a string. The parameter of this page can be:
    /// 1. Javascript file location parameter "file=" (eg. "Compress.aspx?file=/path/to/script.js")
    /// 2. Encoded Javascript code with parameter "code=" (eg. "Compress.aspx?code=%20F...")
    /// NOTE: In the second form the code is the pure javascript code between tags.
    /// </summary>
     private   string  Script
     ... {
        get
        ...{
            if (Request.QueryString["file"] != null)
            ...{
                string fileName = Request.QueryString["file"];
                /**//*
                 * Localization is always an issue if you are non-English.
                 * System.Text.Encoding class helps sort out this problem.
                 */
                string sourcePath = MapPath(fileName);
                Encoding locale = System.Text.Encoding.GetEncoding(CODEPAGE);
                StreamReader sr = new StreamReader(sourcePath, locale);
                String strCompress = sr.ReadToEnd();
                sr.Close();
                return strCompress;
            }
            else if (Request.QueryString["code"] != null)
            ...{
                string strCode = Request.QueryString["code"];//todo: parse
                return strCode;
            }
            else ...{ return null; }
        }
    }

因为我把原来库里的代码也拿过来了，所以代码比较多，但fold起来不难看懂。如果要测试很简单。只要察看：

Compress.aspx?file=/path/to/script.js

如果没有错误，应为一行（浏览器会自动wrap）没有缩进的JavaScript代码。他的效能和原来的/path/to/script.js应该一模一样。所以你可以在任何地方来调用。比如：

< head >
< script  language ="JavaScript"  src ="Compress.aspx?file=/path/to/script.js"  type ="text/javascript" ></ script >
</ head >

由于项目现在就使用了file include。当query string为code的时候还没有测试和使用过，程序难免有问题。请大家使用的时候注意。另外，如果页面的.js文件大小在200K以下也不建议使用。大概下载的时间和aspx文件运行的时间差不多或者更短。当文件在500K以上，用户带宽比较窄，效果就很明显了。要取得最好的效果，当然还是在deploy的时候老老实实运新一次WinForm版本的程序。