Пост с общим мнением об использовании именованного импорта и импорта по умолчанию из ESM.
Контекст
Модуль в JavaScript — это просто файл, содержащий связанный код
Есть два способа экспортировать модуль в современный javascript с помощью ESM:
- Именованные экспорты — это экспорт с несколькими значениями, поскольку его можно использовать для экспорта нескольких функций, переменных и классов из модуля.
- Экспорт по умолчанию — это экспорт одного значения, поскольку он позволяет экспортировать один фрагмент данных.
Сценарии использования именованного экспорта и экспорта по умолчанию
Прошлое
Экспорт с одним значением обычно был предпочтительным способом экспорта кода для использования другими, поскольку он напоминает способ написания и экспорта кода до того, как собственные классы стали поддерживаться в JS, то есть через функцию IIFE. Тело функции IIFE содержит код модуля, в нем описаны все переменные и функции, а остальные классы доступны только самому коду модуля.
Это также помогает мысленно поместить весь связанный код в одно место в рамках одного экспорта по умолчанию, а не видеть несколько экспортов в модуле и не быть уверенным, что именно модуль хочет экспортировать или ядро/сущность модуль, когда вы впервые взглянете на файл.
Присутствует
Если Javascript не приносит пользователям радости, поблагодарите его и выбросьте.
Приведенная выше цитата взята из Доклада Эдди Османи о стоимости Javascript. Реальность такова, что огромное количество Javascript отправляется пользователям, и это не очень хорошо для производительности. Существуют шаблоны и способы эффективного использования Javascript, а с точки зрения экспорта/импорта импорт по умолчанию может быть очень затратным.
«Экспорт объектов по умолчанию обычно является анти-шаблоном (если вы хотите экспортировать свойства). Вы теряете некоторые преимущества модуля ES6 (сотрясение дерева и более быстрый доступ к импорту). —Аксель Раушмайер
Импортируя только код, который нам нужен из модуля, а не весь файл/модуль, используя именованный экспорт, мы экономим на размере и не импортируем неиспользуемые части, как показано в коде ниже.
Еще одним преимуществом именованного экспорта является то, что он стимулирует вас к написанию чистого кода, поскольку вы никогда не знаете, в каком контексте будет выполняться функция, поэтому вы не можете предполагать какое-либо общее состояние.
Кроме того, современные инструменты лучше работают с именованным экспортом, таким как рефакторинг VSCode. Если вы по умолчанию экспортируете функцию, а затем переименовываете функцию, она будет переименовывать только функцию в файле, а не какие-либо другие ссылки в других файлах. В то время как с именованным экспортом он переименует класс и все ссылки на этот код во всех файлах, которые его используют.
Дополнительные ресурсы
Уменьшение полезной нагрузки JavaScript с помощью Tree Shaking — Google Web Fundamentals
