Что такое VitePress?

VitePress — это Генератор статических сайтов (ГСС), предназначенный для быстрого создания сайтов, ориентированных на контент. В двух словах, VitePress берёт ваш исходный контент, написанный в Markdown, применяет к нему тему и генерирует статические HTML-страницы, которые можно легко развернуть в любом месте.

Хотите попробовать прямо сейчас? Перейдите к главе Первые шаги.

Примеры использования

• Документация

  VitePress поставляется с темой по умолчанию, предназначенной для технической документации. Она содержит эту страницу, которую вы сейчас читаете, а также документацию по Vite, Rollup, Pinia, VueUse, Vitest, D3, UnoCSS, Iconify и многое другое.

  Официальная документация Vue.js также основана на VitePress, но использует пользовательскую тему, разделяемую между несколькими переводами.

• Блоги, портфолио и маркетинговые сайты

  VitePress поддерживает полностью кастомизированные темы, при этом разработчики могут использовать стандартное приложение Vite + Vue. То, что он построен на базе Vite, также означает, что вы можете напрямую использовать плагины Vite из его богатой экосистемы. Кроме того, VitePress предоставляет гибкие API для загрузки данных (локальной или удаленной) и динамической генерации маршрутов. С его помощью можно построить практически всё, что угодно, если данные могут быть определены во время сборки.

  Официальный блог Vue.js — это простой блог, который генерирует свою индексную страницу на основе локального контента.

Опыт разработчика

VitePress стремится обеспечить отличные возможности для разработчиков при работе с содержимым в формате Markdown.

• На базе Vite: мгновенный запуск сервера, правки всегда отражаются мгновенно (<100 мс) без перезагрузки страницы.

• Встроенные расширения Markdown: Frontmatter, таблицы, подсветка синтаксиса... называйте как хотите. В частности, VitePress предоставляет множество расширенных возможностей для работы с блоками кода, что делает его идеальным для создания технической документации.

• Markdown с возможностями Vue: каждая Markdown-страница также является однофайловым компонентом Vue, благодаря 100% синтаксической совместимости шаблона Vue с HTML. Вы можете внедрить интерактивность в статический контент, используя шаблонизаторы Vue или импортированные компоненты Vue.

Производительность

В отличие от многих традиционных ГСС, где каждая навигация приводит к полной перезагрузке страницы, сайт, созданный VitePress, обслуживает статический HTML при первом посещении, но становится Одностраничным приложением (SPA) для последующей навигации по сайту. Эта модель, на наш взгляд, обеспечивает оптимальный баланс производительности:

• Быстрая начальная загрузка

  При первом посещении любой страницы будет использоваться статичный, предварительно отрендеренный HTML для быстрой загрузки и оптимального SEO. Затем на страницу загружается пакет JavaScript, который превращает страницу в Vue SPA («гидратация»). Вопреки распространённому мнению о медленной гидратации SPA, этот процесс на самом деле чрезвычайно быстр благодаря высокой производительности Vue 3 и оптимизациям компилятора. По данным PageSpeed Insights, типичные сайты VitePress достигают почти идеальных показателей производительности даже на мобильных устройствах с низкой скоростью передачи данных.

• Быстрая навигация после загрузки

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

• Интерактивность без штрафов

  Для того чтобы динамические части Vue, встроенные в статический Markdown, могли работать в режиме гидратации, каждая страница Markdown обрабатывается как компонент Vue и компилируется в JavaScript. Это может показаться неэффективным, но компилятор Vue достаточно умён, чтобы разделить статическую и динамическую части, минимизируя как стоимость гидратации, так и размер полезной нагрузки. При первоначальной загрузке страницы статические части автоматически исключаются из полезной нагрузки JavaScript и пропускаются во время гидратации.

Что насчёт VuePress?

VitePress — это духовный наследник VuePress. Оригинальный VuePress был основан на Vue 2 и webpack. Благодаря Vue 3 и Vite под капотом, VitePress обеспечивает значительно лучший опыт разработки, лучшую производительность, более отточенную тему по умолчанию и более гибкий API для настройки.

Разница в API между VitePress и VuePress заключается в основном в тематическом оформлении и настройке. Если вы используете VuePress 1 с темой по умолчанию, то переход на VitePress будет относительно простым.

Также были приложены усилия для создания VuePress 2, который также поддерживает Vue 3 и Vite с большей совместимостью с VuePress 1. Однако поддерживать два генератора параллельно не представляется возможным, поэтому команда Vue решила сосредоточиться на VitePress как основном рекомендуемом генераторе статических сайтов в долгосрочной перспективе.