4

使用 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 未定义

4

5 回答 5

0

我建议使用head.js。

使用单独的 .js 文件确实可以帮助您减少页面加载时间。您只需包含一个文件，其中包含以下内容：

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {     
   // all done     
});
于 2012-09-23T12:15:48.867 回答
0

为了克服这些类型的情况，你有很多技巧。其中一些是：

Page Specific JS :尝试根据需求添加 javascript 文件。不要添加页面中没有使用的任何不必要的 JS。

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

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

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

将多个 JavaScript 文件合并为一个 JS 文件

祝你好运 ！！

于 2012-09-23T12:12:27.167 回答
0

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

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

在您拥有一个 JavaScript 文件后，您可以使用带有compilation_levelof的 Closure Compiler ADVANCED_OPTIMIZATIONS（参见此处），它可以删除所有未使用的 JavaScript 代码。结果，您将获得您在页面上真正使用的 jQuery、jQuery UI 和其他库的子集。生成的 JavaScript 代码将与其他页面上的其他代码不同，但它可能非常小，并且可以更好地优化为任何单独的文件。

于 2012-09-23T12:40:01.517 回答
0

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

于 2012-09-23T12:44:07.780 回答
0

将文件捆绑在一起

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

捆绑可以显着改善您的首页点击下载时间。

捆绑通过将多个 CSS 文件和 Javascript 文件组合成单个 CSS 文件和 javascript 文件来减少对服务器的单个 HTTP 请求的数量。

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

于 2016-01-28T21:06:28.133 回答