Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

VuePressをVitePressに置き換えてみる

この投稿はJamstack Advent Calendar 2020の20日目の記事です

概要

スクリーンショット 2020-12-20 1.42.44.png

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

VitePress

  • VuePressはVueのv2ベースでWebpackが使われています
  • VitePressはVueのv3ベースでViteが使われいるのが最大の特徴です
  • Viteを使っているのでビルドが爆速というのが売りのようです
  • ※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の追加
yarn add -D vitepress
  • npm scriptsのコマンドをvuepressからvitepressに変更
-    "start": "vuepress dev docs",
-    "build": "vuepress build docs"
+    "start": "vitepress dev docs",
+    "build": "vitepress build docs"
  • フォルダ名変更
    • docs/.vuepressdocs/.vitepress

publicフォルダの位置を修正

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

sidebarの設定修正

  • 起動はできていますがサイドメニューが表示されません
    • ネストしないタイプのsidebarを使っていましたが書き方が変わったようです
    • 型定義を見ればでどう設定するばいいか分かっていいですね
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を定義することでテーマカラーを設定できます
  • VitePressはStylusを使っておらずCSSのみで構成されているようでテーマの設定のしかたが変わったようです
    • 設定方法が分からなかったので今回は見送りで

プラグイン周り

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

ビルド時間のチェック

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

Devモードで起動

  • VuePressは10秒弱です

vuepress_dev.gif

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

vitepress_dev.gif

ホットリロード

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

vuepress_reload.gif

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

vitepress_reload.gif

Productionビルド

  • VuePressは16秒でした

スクリーンショット 2020-12-20 2.36.20.png

  • VitePressは10秒でした!

スクリーンショット 2020-12-20 2.36.43.png

余談

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

スクリーンショット 2020-12-20 2.43.11.png

まとめ

  • VuePressで作った資産をVitePressに移行することはそこまで苦労せずにできそうです
    • ただしプラグイン周りであったりまだ未対応?/ドキュメント未記載?の部分もあるので今後のアップデートに期待です
  • Viteを使ったことによる高速化はとても実感できました!
    • きっとViteのスピードに慣れてしまうと今の間隔には戻れないんだろうなーと思いました!
ozaki25
mdc
”自己研鑽のサイクル”を応援するコミュニティです。外の世界に発信&フィードバックを受け、コミュニティの仲間と共に頑張りましょう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away