SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

フロントエンドの爆速な開発サーバを実現する Vite を試してみた

Vue.js フロントエンド

こんにちは！スマートキャンプでエンジニアをしている中川です。

先日Twitterを何気なく眺めていたところ、Vue.js 生みの親の Evan You氏が何やら興味深いツイートをしているのが目に止まりました。

...なるほど。これまでReactやVueを用いたフロントエンドの開発環境はWebpackに代表されるbundlerを通すことがデファクトとなっていますが、初回起動の時間が長い・HMRにラグが発生するなどの問題はあったかと思います。

導入はどうやるんだろう、実際どのくらい早くなるんだろう、など疑問が湧いてきたので、今回の記事では実際にViteを使ってみます！

余談ですが、Viteの発音はばいとではなくゔぃーとらしく、リポジトリにもその記載がありました。（ばいとばいと言ってました...）

https://github.com/vitejs/vite#trivia

導入

では早速Viteをローカルで導入してみます！

基本的にリポジトリのGetting Startedに従って進めていきます。

github.com

以下コマンドを実行します。

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install

手順に従って実行していきます

インストールが終わったようなのでpackage.jsonを確認してみます。

{
  "name": "try-out-vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-beta.14"
  },
  "devDependencies": {
    "vite": "^0.20.0",
    "@vue/compiler-sfc": "^3.0.0-beta.14"
  }
}

scriptsには開発サーバ起動のためのdevコマンドと本番環境のファイルをビルドするbuildコマンドを持つのみ、 依存関係は vue, vite, @vue/compliler-sfc のみと、非常にスッキリした構造になっています。

また、vueのバージョンは3が指定されているため、Composition APIなどVue 3の機能をデフォルトで使用することが可能です。

Vue 3に関しては以前記事を投稿したので、よろしければ併せてお読み下さい。

tech.smartcamp.co.jp

では問題なく起動出来るか確認してみます。

$ npm run dev

起動の様子

無事起動確認出来ました。

実際にnpm run dev実行から上記のログが表示されるまでは1秒かかっておらず、フロントエンドの開発サーバ起動時間としてはまさに爆速と言えそうです。

最後にhttp://localhost:3000/にアクセスしブラウザの表示も確認してみます。

ブラウザの表示も確認

問題なさそうですね。

コンソールにはvite上のイベントが出力されており、HMR対象のファイル、例えば HelloWorld.vue を変更し保存すると、コンソールに[vite] /src/components/HelloWorld.vue reloaded.といった変更を検知したファイル名とともに表示がされます。

ディレクトリ構成

ディレクトリ構成は以下です。

$ tree -a -I "\.DS_Store|\.git|\.gitignore|node_modules"

.
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

4 directories, 9 files

実際に表示されるHTMLの流れとしては以下のような形でした。

  • index.html内で/src/main.jsを module タイプの script タグとして読み込む
  • さらに/src/main.jsで/src/App.vueを createApp し、index.htmlの<div id="#app"></div>にマウントする
  • /src/App.vueから子コンポーネント等をインポートする

機能

ここからはドキュメントを読んでいて気になった機能を紹介します。

TypeScript

TypeScriptのサポートは以下のような仕様のようです。

  • .tsファイルと<script lang="ts">形式インポートのどちらもサポート
  • .tsファイルはトランスパイルを行う
  • .tsファイルと.vueファイルのどちらも型チェックは行わない
    • IDEやビルドプロセスで型チェックを行う前提
  • esbuildを使って .js にトランスパイルするが、tsc の20~30倍の速度
    • HMRの更新は50ms以下でブラウザに反映
    • esbuildは前述の通りトランスパイルのみ行うので、TypeScript の特定の機能をサポートしない
      • tsconfig.json の compilerOptions で "insolatedModules": true を設定することで警告する

本番環境のビルド

ES Modules の import はウォーターフォール的なネットワークリクエスト下においてページロード時間がかかりすぎるため、Vite はビルド機能を有しています。

シンプルにビルドするにはvite buildを実行するだけですが、内部的にはRollupを使用しているため、挙動をカスタマイズしたいときはRollupの対応したオプションをvite buildに渡すことで実現できます。また、Rollup由来でないオプションも提供しているようです。

https://github.com/vitejs/vite/blob/master/src/node/build/index.ts

React, Preact 対応

この記事中では Vue を使用してきましたが、あくまでもデフォルトの選択肢というだけで、Vite は React や Preact にも対応しています。 viteプロジェクト作成時に、$ npm init vite-appの代わりに$ npm init vite-app --template reactなど、--templateオプションに対してreactもしくはpreactを指定することでそれぞれのライブラリに対応する形で初期化されるようです。

また、jsxにも対応しており、リポジトリ内に詳細な手順がありました。

https://github.com/vitejs/vite#jsx-with-reactpreact

まとめ

駆け足で紹介してきました。

フロントエンド開発サーバの起動やHMRの待ち時間がなくなったことで開発体験として非常にスムーズになり、普段の開発で意外と待ち時間に対してストレスを感じていたことを実感出来たのも発見でした。

リポジトリにもStill experimental, but we intend to make it suitable for production.とある通り、今すぐプロダクトに導入出来うるものではありませんが、Evan氏が精力的に開発し続けていることもあり日の目を見る日は近いのかなと思いました。

今回の記事は以上になります、それでは！