Оба подхода будут иметь одинаковый эффект, делая эту библиотеку доступной для вашего приложения.
Подход HTML заставляет ваши зависимости извлекаться и выполняться браузером во время выполнения. Подобно тому, как вы включили бы img s на страницу, вы можете включить script s на страницу с источником скрипта, либо встроенным, либо из другого URI. Итак, допустим, вы создали страницу HTML, поместили вокруг нее несколько тегов script, а затем нажали эту страницу в своем браузере. Ваш браузер отсканирует HTML-страницу, определит все теги script и начнет их загрузку. Он также запомнит, в каком порядке были найдены теги script, и проанализирует и выполнит их в этом порядке (если только вы не используете для них атрибуты async и defer).
Итак, браузер видит HTML-страницу, состоящую из различных элементов, включая некоторые теги script, загружает их (возможно, параллельно) и выполняет их (последовательно). Теперь эти скрипты могут знать или не знать ничего друг о друге на странице.
Теперь давайте перейдем к сфере React и других многофункциональных приложений Javascript, которые зависят от различных библиотек Javascript.
Когда вы делаете Javascript Module Bundling, т.е. import { something } from "package", это будет получено при компиляции раз вашим компилятором Javascript, например, Реагируйте через create-реакции-приложение, когда вы делаете npm run build, или эквивалентный скрипт Angular, или другие компиляторы, такие как веб-пакет и т. Д. Эти компиляторы будут сканировать не только один файл, а скорее все ваше приложение. Обычно они начинаются с точки входа, например, index.jsx, а затем обнаруживает график зависимостей и рекурсивно просматривает каждый файл или модуль, который они идентифицируют, и обнаруживает эти зависимости и так далее, и так далее. Как только компилятор обнаружит, разрешит, соберет и объединит ваше приложение, вы, как правило, получите один файл Javascript (например, main.[some hash].js), который является вашим приложением И со всеми зависимостями (все остальные). Модули, которые вы import ed) объединены в один файл.
Итак, вы видите, большое различие:
Сценарии HTML - это независимые ресурсы, которые загружаются и обрабатываются браузером во время выполнения.
Модули Javascript обнаруживаются во время компиляции и в конечном итоге объединяются вместе с кодом вашего приложения в один файл.
Я оставляю в стороне такие понятия, как расщепление пакетов и динамические ссылки и т. Д., Чтобы проиллюстрировать большее различие; в конечном итоге вы будете читать о вариациях в каждом подходе, углубляясь в них.
Преимущества HTML-скрипта:
Они извлекаются независимо, возможно, из CDN, могут даже уже кэшироваться в вашем браузере, если они понадобились другому веб-сайту и загружали их ранее. Таким образом, такие вещи, как jQuery, loDash и т. Д. Являются общими пакетами, которые, возможно, уже были загружены, и ваш браузер получит выгоду от своего внутреннего кэша.
Их можно загружать параллельно; хотя вы можете положиться на браузер, чтобы убедиться, что они выполняются последовательно. Например, если у вас есть свой собственный скрипт, который полагается на то, что jQuery уже загружен, все, что вам нужно сделать, это сначала <script src="jquery.min.js" />, а затем <script src="myscript.js">, и эта последовательность будет соблюдена.
Преимущества модуля Javascript
Ваш код может не нуждаться во всей jQuery, lodash или любой другой библиотеке, на которую вы ссылаетесь. Импортируя любую функцию из ваших зависимостей, которая вам нужна в вашем исходном коде, умный компилятор может искусно скальпировать только те функции из более крупной библиотеки (встряхнуть библиотеку в виде дерева), и вы в итоге получите меньшую общую сумму. загрузить полезную нагрузку.
Весь ваш пакет может быть минимизирован, что дает оптимизированный пакет.
Весь ваш пакет будет (/ может быть) в одном файле. Одна загрузка, и все ваше приложение загружено и готово к использованию. Не нужно беспокоиться о загрузке различных ресурсов с разных URL.
Гибридный подход в порядке
Не стесняйтесь использовать гибридный раствор! Если вы проверите свой скомпилированный код React, вы увидите, что компилятор create-react-app вставит <script src="static/js/main.js" /> element at the end of your HTML document. This means that your app can rely on other, включенный выше, в ваш HTML-документ. Поэтому не стесняйтесь загружать некоторые библиотеки в HTML и ссылаться на другие через модули JS. На самом деле, есть случаи, когда вы захотите это сделать; например, включение сценария Google Maps может быть легко выполнено с помощью директивы сценария HTML, и ваше приложение React все еще может использовать библиотеку GMaps.