加载许多 js 文件和变量的最快方法答案

【问题标题】：Fastest way to load many js files and variables加载许多 js 文件和变量的最快方法
【发布时间】：2014-07-23 12:58:42
【问题描述】：

对于一个更大的项目，它是一个单一的网站应用程序，我使用了很多 jquery、js 和 ajax 调用。

正如我在 C# 和 ASP.Net 中所做的那样，当然我尝试将函数/变量拆分为一组用于类别的 js 文件，例如我的“目标”有 1 个文件，我的“佣金”有 1 个文件（这是我的申请的一部分）...

现在我几乎完成了这里的工作，我最终得到了大约 20 到 25 个 js 文件，我在我的 default.aspx 中一个接一个地加载它们...

这是处理这个问题的真正正确（和最快）的方法吗？

【问题讨论】：

这是一个 ASP.NET 应用程序吗？
它们也缩小了吗？
ASP.NET 没有捆绑/最小化支持吗？
@Mark，取决于您使用的版本。您可以捆绑将缩小它们的脚本 - 但这不是自动的。
我猜你的意思是 90，否则我们会丢失 81% 的应用程序！

标签： javascript jquery bundling-and-minification

【解决方案1】：

Bundling and minification其实是ASP.Net 4.5的一个新特性

您可以通过使用 Visual Studio 创建一个新的 ASP.Net MVC 4 Web 应用程序并使用 Web 应用程序模板来查看它，它会创建一个 Bundle Config Class，这可能会满足您的需求：

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "..."

    }
}

必须在 Application_Start() 方法上调用此捆绑配置类：

BundleConfig.RegisterBundles(BundleTable.Bundles);

【讨论】：

【解决方案2】：

有多种工具可以为此发挥作用。我会推荐使用 GruntJS http://gruntjs.com/ 有大量工具/脚本可供实施，并在您尝试部署生产就绪代码时完成了一些 grunt 工作。

https://www.erianna.com/using-grunt-to-minify-and-compress-assets

在短期内，一个更 hacky 的解决方案是在 firebug 上使用 ySlow，它通过工具选项卡允许您缩小给定页面上的所有 javascript，输出为文本。然后，您可以将其保存为一个 js 文件，然后仅在页面中引用该文件，这应该足以用于测试目的，并且如果您的 JS 代码库不会更改。

【讨论】：

【解决方案3】：

您可以在 ASP.NET 中配置 bundling（取决于您使用 MVC 4 的版本或带有 asp.net 4.5+ 的 webforms）。如前所述，您有一个具有以下静态方法的类：

 public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        ...
        //your custom files
        bundles.Add(new ScriptBundle("~/bundles/customjs").Include(
                    "~/Scripts/js/file1.js",
                    "~/Scripts/js/file2.js"));
    }

然后您可以将它们添加到您的 MVC 页面：

@Scripts.Render("~/bundles/customjs")

我认为网络表单类似于：

<%: Scripts.Render("~/bundles/customjs") %>

您可以创建自定义捆绑包并对公共文件进行分组（可能按部分），因此页面将仅加载这些文件。无论哪种方式，它都应该是您页面上的一个衬里，而不是在每个页面上复制和粘贴链接。

有一个警告，如果你已经最小化了，我似乎记得文件不会被加载。

但是，如果您使用的是旧版本的 ASP.NET，并且您希望缩小，那么您也可以使用 Web Essentials 来缩小每个文件。

【讨论】：