Загрузка модуля JavaScript ES6 через <script src = ""> и импорт всех экспортов в теге <script> одинаковы?

Не могу понять разницу между двумя примерами, которые я только что прочитал в конце раздел руководства Deno по команде deno bundle:

Bundles can also be loaded in the web browser. The bundle is a self-contained ES module, and so the attribute of type must be set to "module". For example:

<script type = "module" src = "website.bundle.js"></script>

Or you could import it into another ES module to consume:

<script type = "module">
  import * as website from "website.bundle.js";
</script>

У меня создалось впечатление, что обе формы достигают одного и того же эффекта (т.е. «извлекается и выполняется немедленно, прежде чем браузер продолжит анализ страницы»), а последняя используется, когда следует сценарий или кто-то хочет сузить то, что импортируется (например, как показано в этот ответ).

  • Раздел 16.6.1.2 Модули книги Изучение ES6, похоже, согласен с этой оценкой.

  • Тема Reddit Разница между модулем импорта Es6 и скриптом src = "" также, кажется, подтверждает это: "Вместо того, чтобы выгружать всю библиотеку в глобальную область видимости, вы вместо этого включаете только то, что вам нужно и что фактически используете."


Это можно рассматривать как дубликат других вопросов (см. Список внизу), но эти ответы мне не очень помогли, и дополнительные источники также, похоже, не показали, правильно ли мое предположение. (С другой стороны, более чем возможно, что я упустил из виду что-то очевидное, и мне пришлось бы поработать над своими навыками понимания прочитанного ...)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
0
47
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I was under the impression that both forms achieve the same effect

Да, оба они будут иметь одинаковый эффект

(i.e., "fetched and executed immediately, before the browser continues to parse the page"),

Нет, любой <script с type = "module" по умолчанию будет defer, поэтому загрузка не будет блокировать синтаксический анализ. Затем все отложенные сценарии выполняются в том порядке, в котором они появляются, после синтаксического анализа и до срабатывания DOMContentLoaded.

and the latter is used when a script follows or one wants to narrow down what is imported (e.g., as seen in this answer).

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

Если у него есть побочные эффекты (например, приложение для реагирования, которое отображает в DOM) и является самодостаточным, то просто включения тега будет достаточно, чтобы запустить его.

Спасибо за лаконичный, но обстоятельный ответ! Не уверен, как я пропустил, что теги <script type = "module" ...> по умолчанию являются deferred, но я рад, что вы указали на это.

toraritte 05.04.2021 15:40

Другие вопросы по теме