web优化之-mvc js动态合并 动态压缩 去掉js重复引用 js缓存 js延迟加载

做web前段也有一段时间了，对于web中js文件的加载有些体会想跟大家一起分享一下。

1.首先说说js文件的合并和压缩吧

为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并压缩,这里我们借用Yahoo.Yui.Compressor工具来压缩我们的js文件

代码如下：

 public class Js : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/javascript";
            HttpRequest request = context.Request;
            HttpResponse response = context.Response;
            if (!request.QueryString.AllKeys.Contains("href"))
            {
                response.Write("No Content");
            }
            else
            {
                string href = context.Request.QueryString["href"].Trim();
                string[] files = href.Split(new string[]{",","，"},StringSplitOptions.RemoveEmptyEntries);
                foreach (string fileName in files)
                {
                    string filePath = context.Server.MapPath(fileName);
                    if (File.Exists(filePath))
                    {
                        string content = File.ReadAllText(filePath, Encoding.UTF8);
                        content = JavaScriptCompressor.Compress(content);
                        response.Write(content);
                    }
                    else
                    {
                        response.Write("\r\n未找到源文件"+filePath+"\r\n");
                    }
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

当我们在浏览器访问js时如：

http://localhost:58798/js.ashx?href=scripts/jquery.lazyload.js,scripts/jquery.validate.js

返回结果如图：