当前位置:编程学习 > JS >>

js文件合并,压缩,缓存,延迟加载

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

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

为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并压缩

代码如下:

[csharp]
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



 返回结果如图:

但是在实际开发中很多项目为了最求js的合并和压缩,开发很不友好把js的引用放在一个地方,写了很长的一串啊,如上面js引用。
 
下面说说如何改善吧:
[csharp]
public static class Extensions 
   { 
       const string jsFileKey = "JSFileKey"; 
       static string jshandlerUrl = string.Empty; 
       public static string JsHandlerUrl 
       { 
           get 
           { 
               if (string.IsNullOrEmpty(jshandlerUrl)) 
               { 
                   jshandlerUrl = ConfigurationManager.AppSettings["jsHandlerUrl"] ?? string.Empty; 
               } 
               return jshandlerUrl; 
           } 
       } 
 
       public static void AppendJsFile(this HtmlHelper htmlHelper, string jsFile, int group = 1) 
       { 
           NameValueCollection jsFiles = null; 
           if (htmlHelper.ViewContext.HttpContext.Items.Contains(jsFileKey)) 
           { 
               jsFiles = htmlHelper.ViewContext.HttpContext.Items[jsFileKey] as NameValueCollection; 
           } 
           else 
           { 
               jsFiles = new NameValueCollection(); 
               htmlHelper.ViewContext.HttpContext.Items.Add(jsFileKey, jsFiles); 
           } 
           if (jsFiles.AllKeys.Contains(group.ToString())) 
           { 
               string fileUrl = jsFiles[group.ToString()]; 
               if

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,