Поиск лучшего способа для Javascript связывания и загрузки

Question

Я использую asp.net mvc 5. Я сделал различные пакеты на сервере, как показано ниже, поскольку каждая страница требует различного набора файлов.

        bundles.Add(new Bundle("~/scripts/external/4")
       .Include(
       "~/Static/Scripts/External/jquery-2.1.3.min.js",
        "~/Static/Scripts/External/jquery-ui.min.js",
        "~/Static/Scripts/External/bootstrap.min.js",
          //and 13 more files
        ));

        bundles.Add(new Bundle("~/scripts/admin/external/1")
       .Include(           
      "~/Static/Scripts/External/jquery-2.1.3.min.js",
       "~/Static/Scripts/three.min.r76.js",                
        "~/Static/Scripts/app.min.js",
       //and 15 more files
      ));

Как вы можете видеть, некоторые js-файлы повторяются (иногда это 4,5 больших файла), так как на них нельзя ссылаться.

Я использую lab.js на стороне клиента для загрузки этих пакетов.

Requirejs здесь работать не будет, так как проблема с пакетами. Какой ваш рекомендуемый подход здесь для объединения файлов и загрузки их без блокировки?

Answer 1

Я думаю, что лучше всего загрузить все библиотеки в один список и получить различное значение:

List<string> bundlesList = new List<string>();
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-ui.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");

IEnumerable<string> ids = (from x in bundlesList select x).Distinct();

bundles.Add(new ScriptBundle("~/bundles").Include(ids.ToArray()));

Надеюсь это сработает:)

Answer 2

Я думаю, что многое зависит от структуры приложения. В чем причина наличия множества связок? Это не должно быть проблемой, если вы загружаете скрипты на страницу, которая не используется.

Обычно я бы сгруппировал большинство скриптов вендора (например, jQuery в вашем примере), так как они необходимы на большинстве страниц сайта. Затем, если есть раздел сайта, которому нужна другая группа скриптов, я бы сгруппировал их вместе. Таким образом, они выбираются один раз, а затем кэшируются и извлекаются из кэша. Наличие множества разных пакетов означает, что файлы будут уникальными и, следовательно, не будут кэшироваться. Я думаю, что лучше иметь несколько больших файлов, чем много маленьких.

В качестве примечания, я не увлекаюсь комплектацией ASP.NET и использую для создания пакетов такой инструмент запуска, как gulp или grunt, но такую ​​же настройку можно выполнить и в ASP MVC.

Но HTTP/2 может измениться: почему оптимизация пакетов больше не является проблемой в HTTP/2