压缩脚本和样式,并将所有js和样式引用组合到单个引用中,以优化站点性能

时间:2013-11-19 06:32:01

标签: javascript asp.net css optimization yui

我的asp站点中有多个脚本和样式引用。当我观察我的网站网络实例时,它正在执行46次请求,这实际上太多,并且极大地影响了我的网站性能。由于我在页面中有多个脚本和样式引用,因此导致过多的http调用。现在我想在压缩gzip中的所有脚本和样式,然后在一个脚本引用和一个样式引用中的多个样式中组合多个脚本。

<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/style1.css" />
<link type="text/css" rel="stylesheet" href="/css/style2.css" />

<script type="text/javascript" src="/scripts/js/js1.js"></script>
<script type="text/javascript" src="/scripts/js/search/jsSerach.js"></script>
<script type="text/javascript" src="/scripts/js/cust/jsCust.js"></script>

当我将测试代码移至生产时我想要的是我想压缩所有三个样式引用,然后将它们组合到单个引用,如 masterStyle ,类似于所有js引用。

为了达到这个目的,我喜欢一个很好的工具YUI tool,但我对如何使用它感到很困惑,并认为我必须用相应的页面替换特定样式或脚本的引用新的综合参考文献,我认为可能有些风险。 任何人都可以建议我该怎么办。 提前谢谢。

5 个答案:

答案 0 :(得分:1)

Microsoft.AspNet.Web.Optimization nuget包,旨在解决此问题。有关如何将此应用于ASP.NET Web表单的详细信息,请参阅此blog

请注意,提供的解决方案仅在发布模式下合并和缩小脚本/ css。它也很灵活。

答案 1 :(得分:1)

我已将Client Dependency Framework用于同一目标并取得了很大成功。 由于CDF的主要功能是管理客户端依赖性,它还将提供允许您在所有代码中自由包含客户端脚本的附加值,并且CDF将仅在需要时包含它们一次。

答案 2 :(得分:0)

http://code.google.com/p/minify/ 试试这个结合所有js和css缩小

答案 3 :(得分:0)

无论您使用何种解决方案,您都希望在保存其中一个文件时自动更新。在创建和维护网站时,这将为您节省大量时间和挫折。

ASP.Net提供了bundling,它结合并缩小了你的CSS和JS。这绝对是ASP.Net的首选路径。要在Asp.Net中使用捆绑,您只需创建捆绑包(通常在global.asax.cs中),就像这样......

bundles.Add(new ScriptBundle("~/Whatever/YouWant.js").Include(
    "~/Scripts/File1.js",
    "~/Scripts/File2.js"));

然后把它写成像这样的HTML ......

@Scripts.Render("~/Whatever/YouWant.js")

如果你的web.config中的debug为true,它将写出每个文件,非缩小。如果debug为false,那么它将写出bundle的路径以及querystring中文件的哈希值,它将返回代码的捆绑和缩小版本。哈希值允许您在客户端浏览器中缓存文件,但如果有任何更改,浏览器将请求新文件。

捆绑包的名称可以是您想要的任何名称,但您应该避免将其命名为与现有文件相同,否则它将无效。我通常使用〜/ Bundles / Whatever.js来避免这种情况(假设你没有名为Bundles的文件夹)。

捆绑文件的另一种方法是使用Web Essentials。 Web Essentials有一种不同的处理捆绑方式。您可以右键单击要捆绑的文件,然后选择Web Essentials - &gt;创建XXX捆绑文件。就个人而言,我可能会避免使用此功能,因为Web Essentials可能会丢弃它,因为ASP.Net提供了一个非常好的解决方案。

答案 4 :(得分:0)

vs 12的捆绑和缩小功能你也可以使用http://www.jsmini.com/来缩小javascript