压缩脚本和样式，并将所有js和样式引用合并为单个引用，以优化网站性能

Compressing scripts and styles and combining all js and styles references into single reference to optimize the sites performace

本文关键字：样式 引用 单个 网站 性能 合并 优化 脚本 压缩 js      更新时间：2023-09-26

我的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工具，但我对如何使用它感到困惑，还认为我必须用新的组合引用来替换相应页面中特定风格或脚本的引用，我认为这可能有一些风险。任何人都可以建议我如何进行。提前谢谢。

我使用Client Dependency Framework实现了同样的目标，并取得了很大成功。由于CDF的主要功能是管理客户端依赖性，它还将提供额外的价值，允许您在所有代码中自由包含客户端脚本，并且CDF只在需要时包含一次。

有一个Microsoft.AspNet.Web.Optimization nuget包就是为了解决这个问题而设计的。有关如何将其应用于ASP.NET Web表单的详细信息，请参阅此博客。

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

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

无论你使用什么解决方案，当你保存其中一个文件时，你都希望它能自动更新。这将为你在创建和维护网站时节省大量时间和精力。

ASP.Net提供捆绑功能，可以组合和缩小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，那么它将写出捆绑包的路径以及querystring中文件的哈希值，并返回代码的捆绑和缩小版本。哈希值允许您在客户端浏览器中缓存文件，但如果发生任何更改，浏览器将请求一个新文件。

捆绑包的名称可以是您想要的任何名称，但应避免将其命名为与现有文件相同的名称，否则它将不起作用。我通常使用~/Bundles/Whatever.js来避免这种情况（假设您没有名为Bundles的文件夹）。

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

vs12的捆绑和缩小功能您也可以使用我们http://www.jsmini.com/缩小javascript

相关文章：