Динамический импорт в Vite

Динамический импорт подгружает модуль по запросу и в сборке выходит отдельным куском.

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

export const text = 'hello';

В разметке оставим кнопку и место для текста:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>hello</title>
  </head>
  <body>
    <button type="button" id="load">Загрузить</button>
    <p id="out">wait</p>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Обработчик щелчка вызовет import() с путём к файлу и подставит результат в абзац:

const button = document.querySelector('#load');
const out = document.querySelector('#out');

button.addEventListener('click', async () => {
  const { text } = await import('./extra/hello.js');
  out.textContent = text;
});

На сервере разработки файл hello.js появится во вкладке сети только после щелчка. После сборки проекта в папке dist/assets лежит отдельный файл для этого модуля, а главный скрипт загружает его по мере необходимости.

Создайте src/lazy/ready.js со строкой ready и выведите её на странице только после нажатия своей кнопки через динамический импорт.

После сборки найдите в dist/assets отдельный файл, который относится к src/lazy/ready.js, а не к главному модулю.