Asp.net MVC在View里動態捆綁壓縮引用的js

前言

Asp.net MVC 4以上版本多了BundleConfig.RegisterBundles方法，可以把要捆綁的腳本或樣式進行捆綁壓縮，以減少客戶端的請求次數從而提高了客戶端的訪問速度。

問題

但世上懶人的數量還是很多，我也是一個，覺得這個方法還不夠方便。在實際中，一些小的頁面或獨立頁面，開了一些開源的js庫之后，js文件比較多，而且每個頁面引用的js又不太一樣，如果能不在BundleConfig描述如何捆綁，像傳統一樣把js拉過來就能自動達到捆綁后的效果，是懶人多想要的結果。正是朝着這個目標，本隨筆將實現一個html的擴展方法，來完成這個功能。你只要像傳統一樣把js拉到view上，改幾個字符，就可以達到了效果了，引入的js還是有智能提示的。

調用方法

@Html.BundleScripts(
      @<script src="~/Scripts/jquery-1.7.1.min.js"></script>,
      @<script src="~/Scripts/login.js"></script>,
      @<script src="~/Content/validBox/validBox.js"></script>
)

如上，把要捆綁的js都當BundleScripts的參數就可以了，效果如下：

BundleScripts的實現

        /// <summary>
        /// 動態捆綁多個腳本
        /// </summary>
        /// <param name="htmlHelper"></param>
        /// <param name="scripts">javscript</param>
        /// <returns></returns>
        public static IHtmlString BundleScripts(this HtmlHelper htmlHelper, params Func<object, object>[] scripts)
        {
            if (scripts == null)
            {
                throw new ArgumentNullException("scripts");
            }

            var inputs = new StringBuilder();
            foreach (var script in scripts)
            {
                inputs.AppendLine(script.Invoke(null).ToString().ToLower());
            }

            var applicationPath = htmlHelper.ViewContext.HttpContext.Request.ApplicationPath;
            Func<string, string> fixSrc = (src) => applicationPath == "/" ? "~" + src : src.Replace(applicationPath, "~/");

            var srcs = inputs.ToString().Matches(@"(?<=src="").+?\.js(?="")").Select(item => fixSrc(item)).ToArray();
            var path = string.Format("~/{0}", Math.Abs(string.Join(string.Empty, srcs).GetHashCode()));

            if (BundleTable.Bundles.GetBundleFor(path) == null)
            {
                BundleTable.Bundles.Add(new ScriptBundle(path).Include(srcs));
            }
            return Scripts.Render(path);
        }

注：Matches方法是一個對正則表達式的包裝。

提問和思考

你覺得此方法的關鍵之處在哪里？歡迎提問，我們一起探討，最好能實現一個比此方法更方便的方法來。