Резюме

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

Создать новые пакеты

  • Объединение по страницам или функциям, например, домашняя страница или BootStrap.
  • Это создает начальную структуру для организации ваших зависимостей, которую можно изменить позже в зависимости от того, что имеет смысл.

Процесс организации

  • Сначала организуйте очевидные вещи, такие как сторонние зависимости и библиотеки Angular, которые будут загружаться на каждой странице. ```misc-libs``` и ```and fee-libs``` — два примера. Еще лучше просто сделать это намеренно. Это дает вам начальную основу для шаблона макета.

  • Открывайте незнакомые библиотеки и находите ключевые функции или классы ‹div› или идентификаторы и используйте их для поиска в базе кода ссылок, чтобы дать представление о том, в каких представлениях они используются.

  • После этого, начиная с наиболее важных страниц, скопируйте вероятные и известные зависимости в представление, чтобы обойти процесс объединения. Это экономит время, так как не нужно постоянно перекомпилировать файл ```bundleConfig.cs```.
  • Затем вы можете начать тестирование страницы в Chrome на наличие визуальных ошибок или журналов консоли, которые указывают на то, что отсутствует. Если у вас нет тестов, это просто процесс проб и ошибок с большим количеством исследовательской работы.

Последние мысли

Если ваша компания еще не настроила тест, вам придется просматривать каждую страницу и тестировать функциональные возможности в поисках ошибок визуально или в консоли браузера. К концу у вас должно получиться что-то вроде примера ниже. Все это позволяет вам иметь специально созданные пакеты, которые имеют смысл, сокращают время загрузки, документируют зависимости непосредственно в коде и могут значительно снизить стоимость будущих изменений. Мой конечный результат был бы лучше, если бы он не был ограничен предыдущими дизайнерскими решениями.