Найти лучший способ для 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 на стороне клиента для загрузки этих пакетов.

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

Answer 1

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

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

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

Но HTTP/2 вещи могут изменить: Why bundle optimizations are no longer a concern in HTTP/2

Answer 2

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

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

Я надеюсь, что эта работа :)