LoginSignup
1
0

Viteについて

Last updated at Posted at 2024-03-20

Viteとは

Vite (フランス語で"速い"という意味) は、新しいフロントエンドビルドツールです。
主な目的は、開発サーバーの高速な起動とモジュールのホットリロードを実現することです。

Viteを使うメリット

  • 開発サーバーの起動が非常に高速
  • モジュールのホットリロードが即時に行われる
  • 本番ビルドも高速
  • Webpackに比べて設定が簡単
  • プリバンドルされたデータを利用し、高速なHMRを実現
  • ロールアップをベースとしているため、最新のブラウザとNode.jsの機能を利用可能

Webpackとの比較

Webpackは長年にわたり主流のビルドツールでしたが、大規模なプロジェクトでは起動が遅く、ホットリロードの応答が遅くなる傾向がありました。また、設定が複雑になりがちでした。

一方、Viteは開発サーバーの起動が非常に高速で、モジュールのホットリロードもスムーズに行われます。設定も比較的シンプルです。本番ビルドの速度も高速化されています。

インストールして実行してみよう

まずはインストール

npm
npm create vite@latest
yarn
yarn create vite

インストーラーの質問に答えると、新しいViteプロジェクトが作成されます。

開発サーバーを起動

プロジェクトディレクトリに移動し、次のコマンドを実行します:

npm
npm run dev
yarn
yarn dev

ローカルサーバーが起動し、アプリケーションが自動的にブラウザで開きます。

参考

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0