Самый быстрый способ загрузить множество файлов и переменных js

Question

Для более крупного проекта, который представляет собой приложение для одного веб-сайта, я использую очень много вызовов jquery, js и ajax.

Как и в C# и ASP.Net, я, конечно, пытался разделить функции / переменные на несколько js-файлов для категорий, например, 1 файл для моих "целей", 1 файл для моих "комиссий" (которые являются частью мое заявление)...

Теперь я почти закончил свою работу здесь, и у меня появилось около 20-25 файлов js, которые я загружаю один за другим в моем файле default.aspx...

Это действительно правильный (и самый быстрый) способ справиться с этим?

Answer 1

Объединение и минимизация на самом деле является новой функцией ASP.Net 4.5

Вы можете увидеть это, создав новое веб-приложение ASP.Net MVC 4 с помощью Visual Studio, и вы используете шаблон веб-приложения, он создает класс конфигурации пакета, который, вероятно, выполняет то, что вам нужно:

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);

Answer 2

Вы можете настроить связывание в ASP.NET (в зависимости от версии, которую вы используете MVC 4 или веб-форм с asp.net 4.5+). Как уже предлагалось, у вас есть класс со следующим статическим методом:

 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 для минимизации каждого файла.

Answer 3

Существуют различные инструменты, которые могут пригодиться для этого. Я бы порекомендовал использовать GruntJS http://gruntjs.com/ которого есть множество инструментов / скриптов, готовых к реализации, и взять некоторые из grunt Работайте над развертыванием готового кода, как вы пытаетесь это сделать.

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

Более кратким решением в краткосрочной перспективе является использование ySlow на firebug, который через вкладку инструментов позволяет минимизировать весь javascript на данной странице, выводимый в виде текста. Затем вы можете сохранить его как один файл js, а затем ссылаться только на тот файл на вашей странице, который должен быть достаточен для целей тестирования, и если ваша кодовая база JS не изменится.