Web制作用のViteテンプレートを公開しました
テンプレートについて
ダウンロードはこちら
概要
Web制作用のViteテンプレートです。以下の機能により快適な開発体験を提供します。
- Viteによる高速なホットリロードおよびビルド
- 各種リンターによるエラーの即時指摘
- ファイル保存時の自動フォーマット
- commit前のファイルのリント、フォーマット、エラーの検知
経緯
現在バンドルツールはwebpackを使用していますが、サイトが大規模になると速度が遅くなるという不満がありました。巷で噂のViteを使えば爆速環境を構築できるとのことだったので、練習がてら静的サイト制作用の環境を構築してみました。
Vite（ヴィート）について
Viteは高速な開発環境を提供する次世代フロントエンドツールです。
環境構築してみて思ったことをいくつか書いていきます。
とにかく早い
役割としてはwebpackと同じようなものですが、とにかくビルドが早いです。以前作成したwebpackを使用したテンプレートでは、開発用サーバーの立ち上げは2秒ほど、プロダクションビルドは8秒かかりました。Viteを使用したこちらのテンプレートの場合、開発用サーバーの立ち上げは1秒以下、プロダクションビルドは3.7秒でした。この時点でビルドに要する時間が半分になっています。コード量が増えるにしたがって、この差はさらに大きくなると思われます。
必要なパッケージの数や設定の記述が少ない
webpackと比べると、パッケージの数やconfigファイルへの記述が少なくなりました。webpackの場合各種loaderをインストールしたり、それらの設定を記述したりする必要がありました。Viteの場合はそこらへんをいい感じにやっておいてくれるみたいなので、パッケージ数やconfigの記述を少なくできます。
ただ、設定の柔軟性があまりないとも言えます。イレギュラーなことをしたい場合は、gulpのようなツールを使用した方がよさそうです。
周辺ツールはまだ発展途上
Viteのプラグインも開発されています。ただ、gulpやwebpackと比べるとまだまだ発展途上という感じです。プロジェクトの仕様によってはgulpやwebpackの方が適しているということもありそうです。とはいえ、普通の静的サイトを制作する分にはこちらのテンプレートで問題なく対応できると思います。
感想
思いのほか簡単に環境構築できました。そしてビルドが早い！Viteを使ってみたいコーダー・フロントエンドの方、興味があればぜひこちらのテンプレートをお使いください。