В предыдущей статье я показал способ реализации базового и простого приложения без сторонних зависимостей или инструментов сборки, просто используя все новые возможности и последние версии браузеров, которые уже реализованы.

Есть дополнительная функция, которую мы можем добавить в это приложение без особых усилий, но в настоящее время она работает только в Safari, поскольку это единственный браузер, в котором реализован API динамического импорта.

С помощью этого API мы можем отложить загрузку частей кода приложения, чтобы браузер не загружал их заранее.

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

Итак, нам нужно изменить только два файла в нашем приложении, чтобы реализовать эту новую функцию.

(Помните, что вы можете увидеть полный код приложения здесь. В репозитории есть ветка под названием async-routing, в которой реализована эта функция ).

Стратегия состоит в том, чтобы добавить новый шаг в функцию навигации маршрутизатора, чтобы перед визуализацией новой страницы он извлекал компонент уровня страницы, который необходимо отобразить.

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

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

Итак, важная строка - это строка с вызовом import. Это скажет браузеру получить файл, который мы настроили в конфигурации маршрутизации (он сделает это только один раз).
Функция импорта возвращает Promise, которое разрешается, когда браузер загружает требуемый модуль. файл (и все его зависимости).

Вот и все.
Еще несколько строк, и мы реализовали разделение кода в наше приложение.

Имейте в виду, что в настоящее время только Safari поддерживает динамический импорт (Chrome будет поддерживать его в следующей версии, v63).
Дополнительная информация о статусе: https://www.chromestatus.com/features/5684934484164608