.net自动合并输出css或js的解决方案附实例下载-幸凡学习网

.net自动合并输出css或js的解决方案附实例下载

用声音读出全文

关注我吧

2016/7/19 16:25:42 阅读次数:5346Tags:ashx css js

一、概述

这是一个基于 aspnet 的自动合并输出js和css的解决方案。由ashx动态获取所要合并的文件，然后输出成一个文件。目的是为了减少服务器请求。当然在合并的过程中需要注意一些问题下面会讲到。底部附有下载地址,效果如下：

.net自动合并输出css或js的解决方案附实例下载

二、使用方法：

//file参数是ashx接收需要合并的文件，多个以豆号(英文)隔开，文件位置最好也是使用绝对地址，这样不管在哪里都可以调用得到 
//t参数是类型，js/css
//如果怕有缓存可以加随机参数在此不作演示

<!-- css引用-->
<link type="text/css" rel="stylesheet" href="HttpCombiner.ashx?file=css/Css1.css,css/Css2.css&t=css" />

<!-- js引用-->
<script type="text/javascript" src="HttpCombiner.ashx?file=js/Js1.js,js/Js2.js,js/jquery1.8.3.js&t=js" ></script>

三、源代码：

1、合并核心代码

<%@ WebHandler Language="C#" Class="HttpCombiner" %>
using System;
using System.Net;
using System.IO;
using System.IO.Compression;
using System.Text;
using System.Configuration;
using System.Web;

public class HttpCombiner : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //查看请求头部
        string acceptEncoding = context.Request.Headers["Accept-Encoding"].ToString().ToUpperInvariant();
        if (!String.IsNullOrEmpty(acceptEncoding))
        {
            //如果头部里有包含"GZIP","DEFLATE",表示你浏览器支持GZIP,DEFLATE压缩
            if (acceptEncoding.Contains("GZIP"))
            {
                //向输出流头部添加压缩信息
                context.Response.AppendHeader("Content-encoding", "gzip");
                context.Response.Filter = new GZipStream(context.Response.Filter, CompressionMode.Compress);
            }
            else if (acceptEncoding.Contains("DEFLATE"))
            {
                //向输出流头部添加压缩信息
                context.Response.AppendHeader("Content-encoding", "deflate");
                context.Response.Filter = new DeflateStream(context.Response.Filter, CompressionMode.Compress);
            }
        }
        string outputtype = "";
        if(context.Request.QueryString["t"]!=null)
            outputtype = context.Request.QueryString["t"].ToString() == "css" ? "text/css" : "text/javascript";
        context.Response.ContentType = outputtype;
        string[] filelist=context.Request.QueryString["file"].ToString().Split(',');

        Int64 filecount = filelist.Length;
        string htmlcontent="";
        for (int i = 0; i < filecount; i++)
        {
            string path = "";
            //判断是网址还是服务器上的文件
            path = filelist[i].ToString().IndexOf("http://") != -1 ? filelist[i] : context.Request.MapPath(filelist[i]);
            htmlcontent+=Get_Http_Contents(path);
        }
        context.Response.Write(htmlcontent);
    }

    private string Get_Http_Contents(string urlstr)
    {
        string coding = "utf-8";
        int time = 50000;
        string sException = null;
        string sRslt = null;
        WebResponse WebRps = null;
        WebRequest WebRqst = WebRequest.Create(urlstr);

        WebRqst.Timeout = time;
        try
        {
            WebRps = WebRqst.GetResponse();
        }
        catch (WebException e)
        {
            sException = e.Message.ToString();

        }
        catch (Exception e)
        {
            sException = e.ToString();

        }
        finally
        {
            if (WebRps != null)
            {
                StreamReader StreamRd = new StreamReader(WebRps.GetResponseStream(), Encoding.GetEncoding(coding));
                sRslt = StreamRd.ReadToEnd();
                StreamRd.Close();
                WebRps.Close();
            }
        }
        return sRslt;

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

2、页面引用实例代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>.net合并多个css或js每种只输出一个文件</title>
    <link type="text/css" rel="stylesheet" href="HttpCombiner.ashx?file=css/Css1.css,css/Css2.css&t=css" />
</head>
<body>
    <h1>ashx合并多个css和js实例</h1>
    <p>如果你看到这个字体的颜色变成红色说明加载了css2.css样式</p>    
    <script type="text/javascript" src="HttpCombiner.ashx?file=js/Js1.js,js/Js2.js,js/jquery1.8.3.js&t=js" ></script>    
    <script type="text/javascript">
        $(function () {
            $("#jquery").html("jQuery.js加载完毕,酷!");
        });
    </script>
    <div id="jquery"></div>
</body>
</html>

四、本实例使用注意事项

·同组生成的js或者css是合并输出的;
·同组内的字符编码自己负责，不一致的话生成的js代码可能会出错;
·生成的顺序和标签的顺序是一致的;
·可压缩输出合并的资源.

另外一个问题，css文件中若使用了相对图像路径，合并css的话会导致无法找到图片的问题。
（1）css文件中改为使用绝对图像路径。