🦔

Viteの革新的なビルドプロセス：React, TypeScript, Dockerを組み合わせたモダン開発体験

2024/01/07に公開

Docker

Viteとは

ESM（ESモジュール）ベースで動作し、従来のバンドルベースのビルドツールと比較して、起動時間が大幅に短縮されます。

バンドルベースは、複数のJavaScriptファイルやアセットを一つのファイル（バンドル）にまとめるツールでWebpackやRollpが代表的なビルドツールになります。しかし、すべての依存関係を処理し、大きなバンドルを生成するため、起動が遅くなることが欠点としてあります。

今回、viteで採用されているESMベースは、必要なコードのみをリアルタイムでロードするためコールドスタートが速くなります。
※コールドスタート: アプリケーションやサーバーが最初に起動することを差している。今回の文脈ではビルドプロセスを指している。

何がいいの？

即時のホットモジュールリプレースメント (HMR)

ページの変更に関係のない部分には影響を与えることなく、ブラウザへの反映が非常に速いので開発者の生産性を上げます。

TypeScriptとCSSのネイティブサポート

tsファイルをサポートしています。
.tsファイルに対してのみトランスパイルを行い、型チェックは行いません。型チェックはIDEやビルドプロセスによって行われることを前提としているみたいです。

esbuildを使用してTypeScriptをJavaScriptにトランスパイルすることで、通常のtscよりも20〜30倍高速なのは凄いですね！（語彙力ない・・・）

tscはTypeScriptの開発チームが提供しているTypeScriptのトランスパイラで、TypeScriptで書かれたソースコードをJavaScriptへとトランスパイルするツールのことです。

依存関係を効率よく処理してくれる

依存関係をプリバンドリングすることで、ページの読み込み速度を改善してくれます。
プリバンドリングしたことで、開発中にそれらのモジュール(.node_modulesとか)を個別にリクエストする必要がなくなります。その結果、ページの読み込み速度が上がるっていう仕組みのようです。

※プリバンドリングとは？
アプリケーションの起動時に外部ライブラリや依存関係をあらかじめ処理（バンドル）することを指します。これにより、開発中に必要なファイルを素早く提供できるようになります。

欠点ある？

ブラウザの互換性

Viteはモダンなブラウザに依存しているため、古いブラウザでは動作しない場合があります。一方、バンドルツールはトランスパイルにより広範囲にサポートしています。
新しいプロジェクトは採用しやすいですが、既存のプロジェクトに相性がいいかは、慎重に検討しないとですね。

大規模プロジェクトでのパフォーマンス

大規模なプロジェクトでは、Viteのパフォーマンスが従来のバンドルツールに比べて劣ることがあります。特に多くの依存関係がある場合、プリバンドリングのプロセスがボトルネックになることがあります。

ただ、アプローチ方法はimportのファイルパスを全てチェックするのではなく、決まった拡張子のものだけに絞ることや、importの書き方を改善すること等やれることはありそうです。

ハンズオン

ここまでなんとなく概要は理解してきたと思います。
実際によく使うツールで構築してみます。

前提

推奨版のnodeをインストールしてください。
インストール方法はググったら色々あるので、割愛します。

初期設定

npm create vite@latest vite-app -- --template react-ts
cd vite-app
npm install

Dockerfileの設定

# nodeのバージョン指定
FROM node:〇〇

# 作業ディレクトリの設定
WORKDIR /app

# 依存関係ファイルをコピー
COPY package.json package-lock.json ./

# 依存関係のインストール
RUN npm install

# アプリケーションのファイルをコピー
COPY . .

# アプリケーションの起動
CMD ["npm", "run", "dev"]

Docker Composeの設定

docker-compose.yaml

version: '3.8'
services:
  vite-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

起動

docker-compose build
docker-compose up

http://localhost:3000 でアクセスしてください。以下のように表示されると思います。

まとめ

Viteはまだ比較的新しいツールであ高速 HMR とネイティブ ES モジュールのサポートにより、開発速度の面で大きく貢献してくれることが分かりました。
ただ、Webpackのような確立されたツールが提供するすべての機能やプラグインを備えていない可能性もあるので、スピード、シンプルさ重視するプロジェクトで最新の機能を重視するなら、Viteは採用できるかなと思いました。

今後はコミュニティ拡大や改善もどんどんして、webpackのように確立される日は近いかもですね。
あと個人的には、Webアセンブリやエッジコンピューティングのような新しい技術との統合によって、更にパフォーマンスの最適化と生産性の向上をしてくれるんじゃないかと思うと、期待大です。
今後もviteや競合のビルドツールを追って発信したいことがあったら投稿します。