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


関連記事

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

js

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

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

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

SWRを使ってみた①

1 はじめに2 概要3 使い方4 主な特徴4.1 自動再検証4.2 重複排除4.3 ステート管理5 さいごに6 おすすめ書籍 はじめに 最近、React用ライブラリのSWRを触る機会があったので備忘録 ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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