Режим MPA (Многостраничное приложение) экспериментально

Режим MPA (Multi-Page Application, Многостраничное приложение) может быть включен через командную строку с помощью vitepress build --mpa или через конфигурацию с опцией mpa: true.

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

Однако, из-за отсутствия SPA-навигации, переходы между страницами будут приводить к полной перезагрузке страницы. Пост-загрузочные навигации в режиме MPA не будут казаться такими мгновенными, как в режиме SPA.

Также обратите внимание, что отсутствие JavaScript по умолчанию означает, что вы фактически используете Vue исключительно как язык шаблонов на стороне сервера. Обработчики событий в браузере не будут прикреплены, поэтому интерактивности не будет. Для загрузки клиентского JavaScript вам нужно будет использовать специальный тег <script client>:

<script client>
document.querySelector('h1').addEventListener('click', () => {
  console.log('клиентский JavaScript!')
})
</script>

# Привет

<script client> - это функция, доступная только в VitePress, а не в Vue. Она работает как в файлах .md, так и в файлах .vue, но только в режиме MPA. Клиентские скрипты во всех компонентах темы будут собраны вместе, в то время как клиентский скрипт для конкретной страницы будет разделен только для этой страницы.

Обратите внимание, что <script client> не оценивается как код компонента Vue: он обрабатывается как обычный JavaScript-модуль. По этой причине режим MPA следует использовать только если ваш сайт требует абсолютно минимальной клиентской интерактивности.