Предотвратить отсрочку ESModules при импорте с помощью тега script - PullRequest
Новая
       3

Предотвратить отсрочку ESModules при импорте с помощью тега script

0 голосов
/ 30 июня 2019

Я настроил дифференциальную загрузку для обслуживания модулей ES6 в новых браузерах.Я столкнулся с проблемой, когда модули по умолчанию откладываются с помощью тега script даже без атрибута defer.Т.е. 

<script type="module" src="..."></script>

всегда откладывается до тех пор, пока не будет проанализирован весь HTML, что приводит к FOUC.

Я пытался предотвратить это и принудительно анализировать файл до загрузки остальной части HTMLс помощью 

<script defer="false" type="module" src="..."></script>

<script defer="nodefer" type="module" src="..."></script>

<script async="false" type="module" src="..."></script>

Ни один из этих подходов не работает.Какой бы метод я ни использовал, он должен поддерживать различие между комплектами ES6 и ES5.Как предотвратить откладывание модулей ESModules до тех пор, пока весь HTML не будет проанализирован, даже если он включен в заголовок?

1 Ответ

1 голос
/ 30 июня 2019

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

Сценарии модуля по умолчанию ведут себя как отложенные - невозможно заставить скрипт модуля блокировать анализатор HTML во время выборки.

Однако, чтобы загрузить модули ES6 в браузере, который поддерживает его, и иметь модули ES5, доступные для резервного копирования, вы можете использовать nomodule как , описанный здесь :

Старые браузеры не будут выполнять сценарии с неизвестным «типом», но вы можете определить резервные сценарии с атрибутом nomodule: 

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Если вы просто беспокоитесь о FOUC, скрывайте свой контент до тех пор, пока не будете готовы, или убедитесь, что необходимый CSS включен в head.

...