VuePressをVitePressに置き換えてみる

この投稿は[Jamstack Advent Calendar 2020](https://qiita.com/advent-calendar/2020/jamstack)の20日目の記事です

## 概要

- [jamstack.orgでも紹介](https://jamstack.org/generators/vuepress/)されている[VuePress](https://vuepress.vuejs.org/)を使ってよくハンズオン資料を作成します
    - ↓こんな感じ

![スクリーンショット 2020-12-20 1.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/f1fb1327-0807-9287-95ee-2ecc68ecac32.png)

- VuePressはいわゆるStaticSiteGeneratorでmarkdownで書いたコンテンツをHTML化することができるお手軽で便利なライブラリです
- 特に不満があるわけではないのですが[VitePress](https://vitepress.vuejs.org/)という後続プロジェクトが進んでいるのでそちらを試してみました

## VitePress

- VuePressはVueのv2ベースでWebpackが使われています
- VitePressはVueのv3ベースで[Vite](https://github.com/vitejs/vite)が使われいるのが最大の特徴です
- Viteを使っているのでビルドが爆速というのが売りのようです
- ※VitePressは[公式サイトにも記載](https://vitepress.vuejs.org/#what-is-vitepress)があるように現在開発中のプロジェクトです
    - 今回使用したVitePressのバージョンはv0.9.2です

> VitePress is early WIP! Currently the focus is on making Vite stable and feature complete first. It is not recommended to use this for anything serious yet.


## VitePress化のためにやったこと

- 既存のVuePressプロジェクトをVitePressに置き換えてみました

### ライブラリ追加と命名変更

- VitePressの追加

```sh
yarn add -D vitepress
```

- `npm scripts`のコマンドを`vuepress`から`vitepress`に変更

```diff
-    "start": "vuepress dev docs",
-    "build": "vuepress build docs"
+    "start": "vitepress dev docs",
+    "build": "vitepress build docs"
```

- フォルダ名変更
    - `docs/.vuepress` → `docs/.vitepress`

### publicフォルダの位置を修正

- ここまでで起動できましたが画像が表示されません
    - 試行錯誤したけっかpublicフォルダの配置場所が変更されたようでした
    - `docs/.vitepress/public` → `docs/public`

### sidebarの設定修正

- 起動はできていますがサイドメニューが表示されません
    - ネストしないタイプのsidebarを使っていましたが書き方が変わったようです
    - [型定義](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/config.ts#L95)を見ればでどう設定するばいいか分かっていいですね

```diff:docs/.vitepress/config.js
     sidebar: [
-      '/1_setup',
-      '/2_initialfile',
-      '/3_hello',
-      '/4_counter',
-      '/5_todolist',
-      '/6_routing',
-      '/7_communication',
+      { text: '1.開発環境構築', link: '/1_setup' },
+      { text: '2.雛形の整理', link: '/2_initialfile' },
+      { text: '3.HelloWorld編', link: '/3_hello' },
+      { text: '4.Counter編', link: '/4_counter' },
+      { text: '5.TodoList編', link: '/5_todolist' },
+      { text: '6.ページ遷移編', link: '/6_routing' },
+      { text: '7.通信処理編', link: '/7_communication' },
     ],
   },
```

- ここまでで基本機能は今まで通り動くようになりました！！

### テーマカラーの設定

- VuePressはStylusが使われていて`docs/.vitepress/styles/palette.styl`を定義することでテーマカラーを設定できます
    - https://vuepress.vuejs.org/config/#palette-styl
- VitePressはStylusを使っておらずCSSのみで構成されているようでテーマの設定のしかたが変わったようです
    - 設定方法が分からなかったので今回は見送りで

### プラグイン周り

- VuePress版ではプラグインをいろいろ入れてましたがVitePress版はまだないようなので今回は諦めます

## ビルド時間のチェック

- 動くようになったのでビルドの高速化がどれほどか確認してみました
- 上記の通りVitePress版はプラグインが使えなかったのでVuePressもプラグインは外した状態で比較します

### Devモードで起動

- VuePressは10秒弱です

![vuepress_dev.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/5e8356a7-ea4e-c2e7-24c2-db592194b3ab.gif)

- VitePressは1秒程度でした！!
    - 最初速すぎて何が起きたか分かりませんでした・・

![vitepress_dev.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/4edba81d-d108-29ab-1c21-9413c0300262.gif)

### ホットリロード

- VuePressは慣れてれば違和感ないですが一瞬再ビルドしてる感じですね

![vuepress_reload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/96b6975c-c789-5af7-bd91-0b43508967b0.gif)

- VitePressは保存した瞬間に反映されてます！すごい！

![vitepress_reload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/aea1c6ac-bea5-31a8-1cde-4a581a08d656.gif)

### Productionビルド

- VuePressは16秒でした

![スクリーンショット 2020-12-20 2.36.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/550997d3-7f80-bf10-f3d2-4f3726e556b1.png)

- VitePressは10秒でした！

![スクリーンショット 2020-12-20 2.36.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/e20233ae-4591-6d03-1943-ad29d1e893f2.png)

## 余談

- 最後にビルドしたものをデプロイして動かしてみたところ何故か以下のように二重に表示されてしまいました、、、
    - htmlにSSGされたものとJSでCSRされたものがそれぞれ表示されてしまっているようで、、、まだ開発版なので今後修正されるでしょう！

![スクリーンショット 2020-12-20 2.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/6bb399b3-a344-fc98-1ce5-1735b1ef0896.png)


## まとめ

- VuePressで作った資産をVitePressに移行することはそこまで苦労せずにできそうです
    - ただしプラグイン周りであったりまだ未対応？/ドキュメント未記載？の部分もあるので今後のアップデートに期待です
- Viteを使ったことによる高速化はとても実感できました！
    - きっとViteのスピードに慣れてしまうと今の感覚には戻れないんだろうなーと思いました！