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

我的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引用

为了实现这一点，我喜欢一个很好的工具，但我对如何使用它感到困惑，并且认为我必须用新的组合引用替换相应页面中特定样式或脚本的引用，我认为这可能有点风险。 任何人都可以建议我该如何进行。 提前感谢。

有一个nuget软件包专门用于解决此问题。有关如何将此应用于ASP.NET的详细信息，请参阅本文档中的Web表单

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

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

---

尝试将所有js和css简化为一体，无论您使用什么解决方案，您都希望在保存其中一个文件时自动更新它。这将为您在创建和维护网站时节省大量时间和挫折

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->创建XXX捆绑文件。就我个人而言，我可能会避免使用此功能，因为Web Essentials可能会放弃它，因为ASP.Net提供了一个非常好的解决方案

vs 12的捆绑和缩小功能您也可以使用，我们必须缩小javascript

我试过了。但这会导致我所有的jquery停止工作。无论如何，我使用缩小js和捆绑我使用第三方dll。