FrontEnd

Vite 3を使ってみた

投稿日:

はじめに

Webpackよりビルドが速いと言われているフロントエンドビルドツール「Vite」のバージョン3が先日正式版が公開されました。これを機にViteについて調べて見たので紹介します。

なぜViteは早いのか

Native ESMの活用

Viteで一番わかりやすいことは、開発中のビルドが早いことだと思います。これは、Webpackのように、実装されたimportやexportを元に1つのJSファイルにバンドルするのではなく、ブラウザによって各モジュールをimportさせるようにしているため、バンドルの手間が省けているからです。
このような、ブラウザによるES Modulesの仕組みをNative ESMと呼びます。ES2015で定義された仕様で、モダンブラウザであれば対応しています。
実際に、プロジェクト生成直後にビルドされたコードを見てみます。

まず、以下がindex.htmlです。

21行目で main.tsx が読み込まれているので、main.tsxを見てみます。ちなみに、 type="module" は、HTMLにModuleを埋め込む際、 src が示すパスがモジュールであることを明示するために必要なものです。

拡張子はtsxとなっていますが、中身はJSにコンパイルされていました。このソースを見て分かるとおり、import文によって、各モジュールがインポートされています。
それでは、プロダクションビルドの場合はどうでしょうか。

先程のように、body内のscriptタグではなく、head内のscriptタグによって、 index.27ee3c8b.js が埋め込まれています。このJSファイルは先ほどとは異なり、従来どおりバンドルされたJSファイルです。
この理由は、importによる依存が多い場合、ブラウザはそれらを1つひとつHTTPリクエストするため、大量のリクエストが発生してしまい、パフォーマンスの問題があるためだそうです。

esbuildによる事前バンドル

先ほど、importによる依存が多い場合、大量のHTTPリクエストによるパフォーマンスの問題があることに触れました。これはローカルの開発においても起こりえます。例えば、複雑な依存関係を持つ外部ライブラリをimportする場合などです。
この問題に対応するため、Viteではesbuildによる事前バンドルが行われます。esbuildはyarn.lockにあるパッケージ単位でキャッシュされるため、一度事前バンドルがされれば、2回目以降は高速です。しかも、esbuild自体はGo言語で開発されたバイナリであるため、Node.jsベースのバンドラーよりも高速です。
yarn.lockにあるバージョンが更新されたタイミングで、キャッシュが更新される仕組みになっています。

また、ESM非対応のモジュールをESM対応させる目的もあります。例えば、Reactのindex.jsを見てみると、以下のようにCommon JSになっていることが分かります。

ですが、先ほどのDevビルドをのソースでは、Reactがimport文でインポートされています。

このように、CommonJSなどのESM非対応モジュールも、esbuildによってESMに変換され、ブラウザから直接importできるようになっています。

Viteのセットアップ

ここからはViteを実際にセットアップする方法を紹介します。

Reactテンプレートでのセットアップ

yarn create vite コマンドを使うと、対話形式でプロジェクト名・テンプレートをしてViteプロジェクトを作成することが出来ます。

Vite 2の時のテンプレートはReact 17だったのですが、現在ではReact 18に対応しています。

viteのyarnコマンド

デフォルトではpackage.jsonで以下のように定義されています。

  • yarn dev
    開発サーバを起動します。デフォルトではlocalhost:5173で起動します。
  • yarn build
    プロダクション用のビルドを dist ディレクトリに生成します。
  • yarn preview
    dist ディレクトリ内のビルドをローカルでプレビューするためのサーバを起動します。

設定

Viteの設定の中で、今回調べた設定を2つ紹介します。

プロキシの設定

Viteにはnode-http-proxyが組み込まれているので、開発サーバのプロキシを設定できます。Webpackにも似たような機能はありますが、複数のターゲットを設定することができたり、ルールを柔軟に設定することが出来ます。
今回は、Github APIをリクエストするための設定を追加してみます。

この設定を追加すると http://localhost:5173/api/repos/octocat/hello-world/issues といったリクエストが出来るようになります。クロスオリジンとなる場合は changeOrigin: true としておきます。また、Githubの場合は、パスに /api は含まれないため、 rewrite で除去します。

環境変数

CRAでは REACT_APP_ というプレフィックスを付けると、アプリケーション内で環境変数を使えましたが、Viteでは VITE_ というプレフィックスを付けます。また、ソースコード内で使用するときは import.meta.env.VITE_HOGE というようにアクセスします。

TypeScriptでの補完が必要な場合は、次のように型を拡張することで対応できます。

このファイルを src/env.d.ts に配置すれば、TypeScriptの補完を効かせることが出来ます。

静的アセット

Webpackの file-loader と似たような機能で、画像ファイルなどの静的アセットを読み込むことが出来ます。

import reactLogo from "./assets/react.svg" のようにimportすると、 reactLogo にファイルへの相対パスが入るため、imgタグのsrcに入れるだけで画像を表示させることが出来ます。

さいごに

開発ビルドについての速さの仕組みや様々な設定について理解することが出来ました。今後、プロダクションビルドでのビルドのスピードについても調べたいと思います。

おすすめ書籍

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。