Question

使用ASP .NET MVC 2创建的页面需要1.7秒才能加载。它包含13个js文件，如下所示。 Firebug显示每个js文件加载返回304响应，但由于有13个文件，它可能会增加页面加载时间。 Chrome审核红色警报推荐组合js文件。

如何使用ASP.NET MVC 2自动或以其他方式将它们组合到单个文件以减少加载时间？项目中应该有单独的js文件以允许替换它们但是应该交付它们作为单个js文件可能。

使用jqgrid，jquery，jquery-ui，tinymce和一些jquery插件js文件，如下所示。使用Visual Web Developer Express 2010。应用程序在Mono 2.10 / Apache和Windows / IIS下运行

site.master包含：

    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1" />
        <link rel="stylesheet" href="../../themes/redmond/jquery-ui-1.8.12.custom.css" type="text/css" />
        <link href="../../Scripts/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
        <link href="../../Content/Css/Site.css" rel="stylesheet" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
        <title>
            <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
        </title>
        <script type="text/javascript">
            "use strict";
            var BASE_URL = '<%= ResolveUrl("~/") %>';
        </script>
        <script src="<%= Url.Content("~/Scripts/jquery/jquery-1.7.1.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/jquery-ui-git.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/i18n/jquery.ui.datepicker-et.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/jquery.contextmenu-fixed2.js")%>" type="text/javascript"></script>
        <% if (CurUser.GetLanguage() == "EST")
           { %>
        <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-et.js")%>" type="text/javascript"></script>
        <% }
           else
           { %>
        <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")%>" type="text/javascript"></script>
        <% } %>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src-multiselect1-deleteandsortpatches.js")%>"></script>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jQuery.jqGrid.dynamicLink.js")%>"></script>
    <script src="<%= Url.Content("~/Scripts/json2.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/TinyMCE/tiny_mce_src.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/myscripts.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
    var 
        $grid;
    $(function() {
        "use strict";

<% if (TempData["Message"]!=null) {
setTimeout( function() {
   showMessage ( '<%= TempData["Message"] as string %>');
...

更新

我在回答中尝试了Oleg建议但是得到了错误jQuery没有定义如下图所示。如何解决这个问题？ IE控制台没有显示任何错误。

jQuey is undefined

Answer 1

要克服这些情况，你有很多技巧。有些是：

页面特定JS：尝试根据要求添加javascript文件。不要添加任何未在页面中使用的不必要的JS。

GZIP压缩：在页面和静态js和css文件上应用GZIP压缩。

缓存：在服务器级别（IIS），您可以对这些静态文件（如JS或CSS）应用缓存

http://sixrevisions.com/web-development/decrease-webpage-load-times/

Combine multiple JavaScript files into one JS file

祝你好运!!

Answer 2

我建议使用head.js。

使用单独的.js文件确实可以减少页面加载时间。你只需要包含一个类似的文件：

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {     
   // all done     
});

Answer 3

我建议您使用the Closure Compiler进行一项实验。

首先，您可以尝试连接您在页面上使用的所有JavaScript和所有内联JavaScript代码。你应该保留原因文件的顺序。在我看来，您将有两个版本的结果：一个使用CurUser.GetLanguage() === "EST"，另一个使用CurUser.GetLanguage() !== "EST"。

在您拥有一个JavaScript文件之后，您可以使用带有compilation_level ADVANCED_OPTIMIZATIONS {{1}}的Closure Compiler（请参阅here）删除所有未使用的JavaScript代码。结果，您将获得jQuery，jQuery UI和您在页面上真正使用的其他库的子集。生成的JavaScript代码将与其他页面上的其他代码一样，但它可能非常小，可以作为任何单独的文件进行更好的优化。

Answer 4

http://combres.codeplex.com/允许您保留单独的javascript文件，并在运行时进行组合和缩小。

真正的享受。

看起来他们已经在asp.net 4.5中推出了类似的内容：

http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Answer 5

将文件捆绑在一起

目前大多数主流浏览器将每个主机名的同时连接数限制为六个。这意味着，在处理六个请求时，浏览器将对主机上的资产的其他请求进行排队

捆绑可以显着提高您的首页下载时间。

Bundling通过将多个CSS文件和Javascript文件组合到单个CSS文件和javascript文件中，减少了对服务器的单个HTTP请求的数量。

此网站提供了一个很好的教程，介绍如何通过五个简单步骤将捆绑添加到您的应用中：http://websitespeedoptimizations.com/Bundling.aspx

如何减少页面加载时间（结合javascript）？

5 个答案: