Чтобы понять текущую экосистему, вам, безусловно, нужно понять происхождение того, как JS долгое время использовался в сети. JavaScript существовал без синтаксиса модуля языкового уровня. Это не было проблемой, поскольку скрипты были небольшими. Но как богатые. клиентские приложения стали огромными, такие вещи, как разделение задач и совместное использование кода для повторного использования, были труднодостижимыми. Стало трудно справляться с конфликтами пространств имен в коде.

Есть два способа использовать JS и загрузить его в браузер:

Способ 1. Добавьте тег скрипта с атрибутом src, в котором хранится ссылка на внешний файл скрипта.

Способ 2: напишите встроенный JS и заключите его в теги скрипта (JS в HTML)

Возможное решение, направленное на решение проблем с большим скриптом, могло бы состоять в том, чтобы иметь отдельные маленькие файлы скрипта (достигнута модульность !! 😌) и просто загружать их с помощью тегов ‹script› на странице (используя способ 1).

<head>
 <title>Prepare a pancake</title>
 <script src=“pan.js”></script>
 <script src=“Grocery/ingredients.js”></script>
 <script src="procedure.js"></script>
 <script src=“kitchen/gas-stove.js”></script>
</head>

Но подождите !! 😳, есть проблемы с таким подходом

Не масштабируется:

Возможно, вы пытаетесь загрузить слишком много скриптов. Тег ‹script› устанавливает новое http-соединение, а для небольших файлов установка соединения может занять значительно больше времени, чем передача данных. Пока скрипты загружаются, содержимое страницы нельзя изменить (иногда это приводит к возникновению Flash нестилизованного содержимого).

Проблемы с производительностью:

Кроме того, у каждого браузера есть узкие места: только определенное количество одновременных запросов может получать данные за один раз.

Раннее решение: рассматривайте каждый файл как IIFE (модуль выявления)

Шаблон раскрывающего модуля использовал IIFE, в которых каждый файл JS был обернут в IIFE, и их можно было безопасно объединить, не опасаясь коллизии областей видимости, т.е. вы должны написать 100 отдельных файлов сценариев, все завернутые в IIFE, объединить их, не опасаясь манипулирования переменные.

Этот шаблон привел к взрывному росту таких инструментов, как Make, Gulp, Grunt, Broccoli, Brunch, StealJS, которые помогли объединить файлы, обернутые IIFE.

Все еще проблемы существуют

  • Полное перестроение: каждый раз, когда вы меняете один файл, вам нужно перестраивать его целиком.
  • Устранение мертвого кода невозможно: когда вы просто объединяете файлы, как вы узнаете, что какой-то код не используется, и как бы вы его удалили.
  • Многие IIFE являются медленными - IIFE заставляют JS-движки с нетерпением ждать синтаксического анализа кода. (Разбирать JavaScript - лучше ленивый, чем нетерпеливый)
  • Нет динамической / ленивой загрузки: здесь вы отправляете весь код заранее, поэтому нет возможности ленивой загрузки.

И поэтому появилось несколько модульных систем вместе с загрузчиками в Javascript, чтобы помочь с модульностью и загружать модули по запросу.

Подробнее об этом в следующей части этой серии🪴