Что такое VitePress?

VitePress представляет собой генератор статических сайтов (SSG), разработанный для создания быстрых, ориентированных на контент веб-сайтов. Проще говоря, 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 стремится предоставить отличный опыт разработки (DX) при работе с контентом Markdown.

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

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

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

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

В отличие от многих традиционных SSG, сайт, сгенерированный VitePress, на самом деле является одностраничным приложением (SPA).

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

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

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

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

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

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

Что насчет VuePress?

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

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

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