PassFront
  1. PassFront
  2. База знаний
  3. Современный JS ES6+

Какие особенности у ES модулей?

Современный JS ES6+

Особенности ES-модулей: статичность (анализируются при сборке — tree shaking), строгий режим, своя область видимости, отложенное выполнение (как defer), синглтоны (один раз), живые связи (live bindings).

Особенности

Статичность

import/export — статические, разбираются до выполнения (на этапе парсинга):

import { fn } from './module.js'; // только верхний уровень, не в условиях

Позволяет tree shaking (удаление неиспользуемых экспортов) и анализ зависимостей.

Строгий режим по умолчанию

Модули всегда в 'use strict' — не нужно указывать.

Своя область видимости

Переменные модуля не глобальны — нет конфликтов имён (в отличие от старых скриптов):

const x = 1; // не попадает в window

Отложенное выполнение (defer)

Модули загружаются как defer — параллельно с парсингом, выполняются после DOM, в порядке зависимостей.

Синглтоны (один раз)

Модуль выполняется один раз; при повторном импорте — кешированный экземпляр:

import './init.js'; // код init выполнится один раз, даже при многих импортах

Живые связи (live bindings)

Импортированные значения — ссылки на экспорт, отражают изменения в модуле:

// counter.js: export let count = 0; export const inc = () => count++;
// main.js: import { count, inc } — count обновляется при inc()

Асинхронный импорт

import() — динамическая загрузка (промис), для code splitting.

CORS

Загрузка модулей с другого origin требует CORS-заголовков.

ESM против CommonJS

  • ESM — статический, import/export, tree shaking, браузер+Node.
  • CommonJS — динамический, require/module.exports, синхронный, Node.

Коротко для собеседования

Особенности ES-модулей: статичность (import/export на верхнем уровне → tree shaking, анализ зависимостей), строгий режим по умолчанию, своя область видимости (нет глобальных конфликтов), отложенное выполнение (как defer), синглтоны (выполняются один раз, кеш), живые связи (импорт — ссылка на экспорт), динамический import(). Отличаются от CommonJS (динамический require).

Другие вопросы раздела