VitePressとは？

VitePressはVuePressの弟分でViteの上に構築されています。

警告: VitePressは現在アルファ版です。すでにドキュメントを作成するのに適した状態になっていますが、マイナーリリースの間に設定やテーマ設定のAPIが変更される可能性があります。

モチベーション

私たちはVuePress v1を愛用しています。しかし、Webpackの上に構築されており、数ページのシンプルなdocサイトでも開発サーバーを立ち上げるのにかかる時間は耐え難いものになっています。HMRの更新でさえブラウザに反映されるのに数秒かかることもあります。

これはVuePress v1がWebpackアプリであることが根本的な原因です。たった2ページでもWebpackプロジェクト（テーマのソースファイルをすべて含む）がコンパイルされているのです。プロジェクトが多くのページを持つ場合はさらに悪化します。サーバーが何かを表示する前に、すべてのページが最初に完全にコンパイルされなければなりません

Viteはこれらの問題をうまく解決しています。ほぼ瞬時にサーバーを起動し、提供されるページのみをコンパイルするオンデマンドコンパイル、そして高速なHMRを備えています。さらにVuePress v1には私が長い間指摘してきたデザイン上の問題がいくつかありますが、リファクタリングが必要なため修正する時間がありませんでした。

今、ViteとVue 3で『Vueを使った静的サイトジェネレータ』の本当の姿を考え直す時が来たのです。

VuePress v1からの改善点

VuePress v1から改善された点がいくつかあります...

Vue 3を使用しています

Vue 3の改良されたテンプレート静的解析を利用して、静的コンテンツを可能な限り文字列化します。静的コンテンツはJavaScriptのレンダー関数コードではなく、文字列リテラルとして送信されます。したがってJSペイロードの解析がはるかに容易になり、ハイドレーションも高速になります。

この最適化はユーザーがmarkdownコンテンツ内にVueコンポーネントを自由に混在させることが可能なまま適用されることに注目してください。コンパイラは自動的に静的・動的な分離を行うので、それについて考える必要はありません。

Viteを使用しています

• 開発サーバーの起動の高速化
• ホットアップデートの高速化
• ビルドの高速化 (内部でロールアップを使用)

ページの軽量化

Vue 3のツリーシェイクとロールアップのコード分割

• リクエストごとに各ページのメタデータを送信しないようにしました。これにより、ページの重みとページ数の合計が切り離され、現在のページのメタデータのみが送信されます。クライアント側のナビゲーションは、新しいページのコンポーネントとメタデータを一緒に取得します。
• VitePressのニーズは非常にシンプルで特殊なので、vue-routerは使用しません。代わりにシンプルなカスタムルーター（200LOC以下）が使用されます。

その他の違い

VitePressはシンプルで設定可能な部分が少ないくなっています。VitePressは現在のVuePressにある複雑さを縮小し、ミニマリストのルーツから再スタートすることを目的としています。

VitePressは未来志向です。VitePressはネイティブESモジュールのインポートをサポートするブラウザのみを対象としています。VitePressはネイティブのJavaScriptをトランスコンパイルせずに使用し、CSS変数を使用してテーマ化することを推奨しています。

今後、次のvuepressとなるのでしょうか？

すでにvuepress-nextがあり、それがVuePressの次のメジャーバージョンとなるでしょう。VuePress v1よりも多くの改良が施されており、Viteにも対応するようになりました。

VitePressは現在のVuePressのエコシステム（主にテーマとプラグイン）と互換性がありません。VitePressはテーマ作成APIを大幅に削減し（ファイルレイアウトの規則ではなく、JavaScriptのAPIを優先）、プラグインはおそらくなし（すべてのカスタマイズはテーマで行われます）とするのが全体のアイデアです。

このトピックについては現在も議論が続いています。もし興味があればあなたの意見を聞かせてください。