Делаем Modern Build

[dagen]

Только надо указать, что этот хак для Сафари нужен для одной-единственной версии: Safari 10.1, которая осталась всего у 2 пользователей из тысячи. Далеко не все поддерживают такие редкие браузеры.

И не упомянуто, что все версии Edge (и в т.ч. IE11, а IE10 не тестил, разумеется), независимо от того, поддерживают ли они script type=module, всё равно загружают legacy-бандл, хоть и не исполняют его (как и Safari@10.1, но костыль для него есть в статье). В таком случае больше подойдёт подход из html-webpack-multi-build-plugin. Плагин этот на уровне PoC, да и полностью его тащить не надо, так как тогда и для новых браузеров не будет работать запрос js-файла ещё на стадии разбора html, а только после исполнения инлайн-скрипта. Лучше использовать его частично:

<script type="module" src="modern_bundle.js"></script>
<script nomodule>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'legacy_bundle.js';
    document.body.appendChild(script);
</script>

Тогда страдать из-за загрузки двух бандлов будут только маргиналы, сидящие на IE11, Edge до 16, Safari до 10.1. Ну и пользователи Хромом и Фаерфоксов, прикипевшие к древним версиям.

[kalyukdo]

я может гдето отстал в технологиях, но всегда же можно сделать

<script>
    var version = navigator ....;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = version + '_bundle.js';
    document.body.appendChild(script);
</script>

[biziwalker]

Да, это на основе User-Agent можно делать. Еще можно сделать небольшой серверный скрипт, который смотрит пришедший запрос и ищет по User-Agent и browserlist наиболее подходящий бандл, который уже и отдает. Примерно так работает polyfill.io

[dagen]

В браузерах есть preload-сканер хтмла, который проверяет на наличие тегов script и инициирует их загрузку ранее. С инлайновыми скриптами вы это теряете. Не замерял, но меньший вес modern-бандла вполне может быть нивелирован этой задержкой.

Ну и в целом userAgent для обсуждаемой проблемы — довольно нишевая и опасная вещь из-за зоопарка браузеров и устройств, хорошо и быстро поддерживается только пока вы делаете под локальный рынок устройств/браузеров, который вы знаете. И пока мы можем использовать встроенные в браузеры проверки на поддержку конкретной функциональности, лучше использовать эти проверки.

[speller]

У меня в результате работы вебпака всегда импорты оказываются заменены на обёртки __webpack_require__ и иже с ними. Зачем этот огород со script type=modules тогда — чтобы просто отсечь старые браузеры, для которых не надо тянуть полифилы?

[leshaogonkov]

Добавим переменную окружения BROWSERS_ENV

Немного наброса: раз уж используется вебпак, мне кажется лучше передавать переменные через env

Устанавливать переменную окружения отдаёт немного магией.

[lusever]

В какой-то момент может понадобится полифил для браузера который поддерживает esmodules. Либо этот момент уже настал у какого-нибудь браузера две версии назад.