Движок и инструменты

CommonJS (изначальная система Node) использует require() для импорта и module.exports для экспорта, загружая модули синхронно во время выполнения. ES-модули (стандарт) используют import/export, разбираются статически до выполнения и поддерживают асинхронную загрузку. Привязки ESM — живые доступные только для чтения представления, а require в CommonJS возвращает копию-снимок экспортированного значения.

Сборщик (например, Webpack, Rollup, esbuild) проходит граф модулей от точки входа и объединяет множество модулей в меньшее число файлов. Tree-shaking выбрасывает неиспользуемые экспорты — ему нужны статические ES-модули, чтобы знать, что достижимо. Минификация уменьшает вывод, убирая пробелы и переименовывая локальные переменные. Разделение кода — обратное объединению: оно режет сборку на части, загружаемые по требованию.

Babel — транспилятор: он переписывает современный синтаксис JavaScript (стрелочные функции, class, опциональную цепочку) в эквивалентный старый синтаксис, понятный целевым движкам, по настроенному списку целей (например, browserslist). Транспиляция преобразует синтаксис; полифилы добавляют отсутствующие API времени выполнения вроде Promise. Babel занимается синтаксисом и подключает полифилы (через core-js) лишь для отсутствующих у целей API.

Исходник сначала транспилируется (например, Babel), понижая современный синтаксис до целей. Затем сборщик обходит статический граф ESM, объединяя модули и вырезая неиспользуемые экспорты через tree-shaking. Минификация сжимает результат; полифилы внедряются для отсутствующих у целей API (часто через core-js, в идеале только нужные). Каждый этап выдаёт source map, сцепляемые так, что итоговая карта указывает минифицированные позиции обратно на исходник для отладки.

Движок JS (например, V8 в Chrome и Node) — это программа, исполняющая JavaScript. Он разбирает исходник в AST, компилирует в байт-код и сразу начинает интерпретировать; затем JIT-компилятор во время выполнения перекомпилирует горячий код в оптимизированный машинный. Само выполнение JavaScript однопоточно — один стек вызовов исполняет одну задачу за раз.

Полифил — это код, реализующий отсутствующий встроенный API (например, Promise, Array.prototype.includes), чтобы старые среды вели себя так, будто он встроенный. Shim — более широкий термин: любой код, перехватывающий или патчащий API ради единообразного поведения, не обязательно отсутствующего стандартного. Определение возможностей (if (!window.Promise)) во время выполнения решает, грузить ли полифил, вместо распознавания браузера.

Все три встраивают движок JS, но дают разные хост-API. Браузеры добавляют DOM, fetch и localStorage, но без файловой системы. Node.js добавляет файловую систему, сеть и process через модули CommonJS (с поддержкой ESM). Deno (среда от создателя Node) по умолчанию использует веб-стандартные API и ESM, нативно поддерживает TypeScript и изолирует доступ к файлам и сети за явными флагами разрешений.

Node определяет тип файла по расширению .mjs/.cjs или полю "type" пакета, затем разрешает спецификаторы через поиск в node_modules и карты exports. ESM может import модуль CommonJS (его module.exports становится экспортом по умолчанию), но CommonJS не может статически require ESM-модуль, ведь ESM грузится асинхронно. Запасной выход — динамический import(), который возвращает Promise и работает из любой системы во время выполнения.

Source map — это JSON-файл, сопоставляющий позиции в сгенерированном (минифицированном или транспилированном) выводе с исходником — файл, строку и столбец. Браузер грузит его при открытом DevTools (по комментарию //# sourceMappingURL), поэтому точки останова, трассировки стека и ошибки показывают исходный код вместо искажённой сборки. Это лишь подспорье для отладки и не меняет, как работает поставляемый код.

V8 присваивает каждому объекту скрытый класс (форму), описывающий раскладку свойств, поэтому объекты, созданные одинаково, разделяют одну форму, а свойства лежат по фиксированным смещениям. Инлайн-кэширование затем запоминает увиденную форму в точке вызова, чтобы в следующий раз взять свойство напрямую. Изменение формы объекта — добавление свойств в другом порядке, удаление одного или передача разных форм — сбрасывает кэш и вызывает деоптимизацию к более медленному обобщённому коду.

Движок владеет кучей и запускает трассирующий сборщик мусора, освобождающий объекты, недостижимые от корней; утечка — это непреднамеренная достижимость: висящие замыкания, отсоединённые узлы DOM, растущие глобальные переменные или живые таймеры. Цикл событий же принадлежит среде выполнения (браузеру или Node), а не движку: он подаёт задачи и микрозадачи на единственный стек вызовов движка. Деоптимизация отдельна — её вызывают смены формы или типа, а не сборка мусора.

Tree-shaking — это устранение мёртвого кода по графу импортов: сборщик выбрасывает экспорт, лишь доказав, что к нему нет пути. import/export ES-модулей статичны — анализируемы до запуска — поэтому граф известен; require в CommonJS может брать вычисляемый путь и переприсваивать module.exports во время выполнения, ломая анализ. Флаг sideEffects в package.json сообщает сборщику, что модуль чист, поэтому даже импортированные, но неиспользуемые модули можно удалить целиком.