こんにちは！スマートキャンプでエンジニアをしている中川です。
先日Twitterを何気なく眺めていたところ、Vue.js 生みの親の Evan You氏が何やら興味深いツイートをしているのが目に止まりました。
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.
— Evan You (@youyuxi) 2020年4月20日
...なるほど。これまでReactやVueを用いたフロントエンドの開発環境はWebpackに代表されるbundlerを通すことがデファクトとなっていますが、初回起動の時間が長い・HMRにラグが発生するなどの問題はあったかと思います。
導入はどうやるんだろう、実際どのくらい早くなるんだろう、など疑問が湧いてきたので、今回の記事では実際にViteを使ってみます！
余談ですが、Viteの発音はばいとではなくゔぃーとらしく、リポジトリにもその記載がありました。（ばいとばいと言ってました...）
https://github.com/vitejs/vite#trivia
導入
では早速Viteをローカルで導入してみます！
基本的にリポジトリのGetting Startedに従って進めていきます。
以下コマンドを実行します。
$ 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に関しては以前記事を投稿したので、よろしければ併せてお読み下さい。
では問題なく起動出来るか確認してみます。
$ npm run dev
無事起動確認出来ました。
実際にnpm run dev実行から上記のログが表示されるまでは1秒かかっておらず、フロントエンドの開発サーバ起動時間としてはまさに爆速と言えそうです。
vue-next-webpack-preview cold server start: 1909ms / compiled for first view: 2732ms
— Evan You (@youyuxi) 2020年5月4日
vite cold server start: 129ms
最後に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氏が精力的に開発し続けていることもあり日の目を見る日は近いのかなと思いました。
今回の記事は以上になります、それでは！
