Webpack 開発終わってるから代替えを検討しよう

DonTacos

調査してたら、Turbopack か Vite かどっちかな気がしてきた。どっちがいいのか決めていこう。

Turbopackについて

Turbopackは、Webpackの後継と見なされている新しいオープンソースバンドルツールです。Turbopackは、Rust で作られ、Webpack よりも高速でスケーラブルな設計になっています。Turbo エンジンをベースにしており、キャッシュ、無効化、インクリメンタルビルドなどの一般的なタスクを処理する再利用可能な Rust ベースのライブラリです。インクリメンタルアーキテクチャを採用しており、Webpack よりも様々な主要なメトリックで優れています。TurboDev サーバーを介してアセットを自動的に処理することで、Webpack 12 に比べてより高速な開発体験を提供します。

WebpackからTurbopackへの移行はスムーズなプロセスです。Turbopackは、webpackユーザーに馴染みのある基本的なWebpackローダーのサポートと構成を実装するようになりました。Webpack から Turbopack への移行方法の詳細については、Turbopack のドキュメントを参照してください

Why Turbopack?

Turbopackを開発する際の目的は、特定の問題を解決することでした。私たちはNext.jsの速度改善に取り組んでおり、いくつかのJavaScriptベースのツールから移行していました。BabelやTerserは取り除かれ、次のターゲットは別のJavaScriptベースのツール、すなわちwebpackでした。

webpackの代替となるものを見つけることが私たちの目標になりました。しかし、代わりに何を使うべきか？

市場には新世代のネイティブ速度を持つバンドラーが登場していましたが、これらを評価した後、私たちは自分たち自身で新しいものを構築することを決定しました。


Turbopack vs Vite

すばらしい記事。

Turbopackは主にNext.js v14とともに使用することを目的としており、Next.js以外のプロジェクトでの使用に関する公式ドキュメントやガイドは限られています。これは、Turbopackの導入を試みる際の障壁となる可能性があります。

よって、Viteかな、今の時点では。

なぜViteなのか

  1. 高速な起動とホットモジュールリプレースメント (HMR): Viteは開発サーバーの起動が非常に速く、HMRが効率的です。これは、ESモジュールを直接利用し、必要なコードのみを動的にロードするためです。開発者は変更を加えた際にほぼ即座に結果を確認でき、開発プロセスがスムーズになります。

  2. TypeScriptのデフォルトサポート: Viteは、追加の設定なしでTypeScriptをサポートしています。TypeScriptファイルをプロジェクトに追加するだけで、Viteはそれを自動的に処理し、ブラウザで実行可能なJavaScriptに変換します。これにより、型安全性と開発時の生産性が向上します。

  3. プラグインエコシステム: Viteは、機能拡張のための豊富なプラグインエコシステムを持っています。Vue.js、React、Svelteなどのフレームワーク専用のプラグインから、画像最適化、CSSプリプロセッサ、ESLint統合まで、様々なニーズに応えるプラグインが用意されています。

  4. モダンなJavaScriptのサポート: Viteは最新のJavaScript機能をフルに活用し、モダンなブラウザでの動作を前提としています。これにより、開発者は最新のJavaScriptの機能を使って開発を進めることができ、将来的にも技術的な負債を抱えにくくなります。

  5. 簡単な設定: Viteの設定ファイルはシンプルで直感的です。多くのケースでは、デフォルト設定で十分に機能し、必要に応じて柔軟にカスタマイズすることができます。これにより、設定にかかる時間を減らし、開発に集中できます。

  6. ビルド最適化: Viteは、プロダクションビルドのためにRollupを内部で使用しています。これにより、最終的なアセットサイズを最小限に抑え、パフォーマンスを最適化することができます。また、コードの分割や遅延ローディングなどの最新のウェブパフォーマンス技術を簡単に利用できます。

  7. SSRと静的サイト生成のサポート: Viteは、サーバーサイドレンダリング (SSR) と静的サイト生成 (SSG) のための公式プラグインやフレームワークをサポートしています。これにより、高パフォーマンスなウェブアプリケーションやウェブサイトを簡単に構築できます。

これらの特徴により、Viteは現代のウェブ開発において、高速かつ効率的な開発体験を提供する強力なツールとなっています。

Viteの開発サーバーでのHot Module Replacement (HMR) が爆速な理由

  1. ESモジュールを基盤としている: Viteは、従来のバンドルベースのアプローチではなく、ネイティブESモジュールを利用します。これにより、ブラウザがモジュールを直接解釈し、必要なものだけをリクエストできるようになります。開発時には、全てのコードをバンドルするのではなく、必要なモジュールのみがロードされるため、起動時間が大幅に短縮されます。

  2. 差分更新: ViteのHMRは、変更されたモジュールのみを更新し、ブラウザに送信します。これは、従来のフルページリロードや全ファイルの再バンドルに比べて、はるかに高速です。変更があった場合、その変更部分だけがブラウザにプッシュされ、アプリケーションの状態を保持したまま更新されます。

  3. 効率的な依存関係の追跡: Viteは、開発サーバーが起動する際に、プロジェクト内の依存関係を効率的に解析し、キャッシュします。その結果、ファイルが変更されたときに、どのモジュールが再読み込みまたは再バンドルされる必要があるかを正確に特定でき、無駄な処理を削減します。

  4. プリビルドされた依存関係: Viteは、node_modules 内の依存関係を最適化されたESモジュールに変換し、キャッシュします。このプロセスにより、開発時の依存関係の読み込みが高速化され、HMRのパフォーマンスが向上します。

  5. サーバー側の最適化: Viteの開発サーバーは、Node.js上で高性能に設計されており、ファイルシステムの変更を迅速に検出し、必要な更新を即座にクライアントにプッシュすることができます。この迅速なフィードバックループは、開発体験を大幅に向上させます。



この記事が気に入ったらサポートをしてみませんか？