Question

对于一个更大的项目，这是一个单一的网站应用程序，我大量使用jquery，js和ajax调用。

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

现在我差不多完成了我的工作，最后得到了大约20到25个js的文件，我在default.aspx中加载了一个文件...

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

Answer 1

Bundling and minification实际上是ASP.Net 4.5的新功能

您可以通过使用visual studio创建一个新的ASP.Net MVC 4 Web应用程序来看到它，并且您使用Web应用程序模板，它会创建一个Bundle Config类，它可能会做您想要的：

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（）方法上调用此bundle配置类：

BundleConfig.RegisterBundles(BundleTable.Bundles);

Answer 2

有各种各样的工具可以对此有用。我建议使用GruntJS http://gruntjs.com/其中有大量工具/脚本可供实施，并且可以在部署生产就绪代码时完成部分grunt工作。

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

短期内更为苛刻的解决方案是在firebug上使用ySlow，通过工具选项卡可以缩小给定页面上的所有javascript，并以文本形式输出。然后，您可以将其保存为一个js文件，然后仅在您的页面中引用它，这应该足以用于测试目的，以及JS代码库是否会发生变化。

Answer 3

您可以在ASP.NET中配置捆绑（取决于您使用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") %>

您可以创建自定义捆绑包和分组公共文件（可能是每个部分），因此该页面只会加载这些文件。不管怎样，它应该是你网页上的 one liner 而不是copy＆amp;粘贴每页上的链接。

有一点需要注意，如果你已经最小化，我似乎记得不会加载该文件。

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

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

3 个答案: