🥴

Vite は webpack に比べてなにがすごいの??

2023/01/21に公開

React

概要

Viteとwebpackを比較し、それぞれの概要・概念・内部処理の違いをざっくりと理解できます！(おそらく)
なお、本記事では具体的な設定方法は書いていませんので、ご了承ください。

この記事を読むと分かること

以下の疑問を解決できます。(多分)

webpackってそもそもなんだっけ？
Viteってなんぞ？
Viteとwebpackって何が違うの？
Viteが良いとは聞くけど、実際なにが良いの？

ざっくり結論

Viteがwebpackと比較して優れている点は主に以下の通りです。

高速ビルド
Viteは、開発速度を重視して設計されており、開発サーバーが標準で組み込まれているため、開発時にブラウザのリロードを行わなくても、保存したら即反映されるため、開発速度が向上します。
高速HMR（Hot Module Replacement）
Viteは、HMR^[1]が標準搭載されており、尚且高速。

webpackとは

まずはじめに、webpackとは、モジュールの依存関係を解決する機能を持つ、モジュールバンドラです。
jsファイルやcssファイルなどを適切な順番で結合し、且つ最適化してくれます。

主な機能は以下の通り。

バンドル

各ファイルの依存関係を解決し結合します。
また、JavaScript以外のファイルも扱うことができ、CSSや画像などのファイルもJavaScriptと同様に扱うことができます。
最適化

圧縮や最適化などのオプションを提供します。

webpackを使用して何が嬉しいのか

JavaScriptのモジュール化が可能

JavaScriptファイルをモジュールとして、インポートすることが可能です。
従来のJavaScriptはscript
タグでJSライブラリを導入する方法が用いられていましたが、グローバルの変数名を汚染しあうという問題がありました。
転送の最適化

ファイルを一つにまとめることで、読み込み速度の高速化に寄与します。
ウェブブラウザーとサーバ間で使用されるHTTP/1.1接続では一度に処理できるリクエストの数が限られているため、複数のファイルの転送に時間がかかります。
ファイルを1つにまとめ、リクエストを1回で済ませることでパフォーマンスを向上させることができます。

デメリット

設定が複雑
最近のフロントエンド開発では、SassでのプリプロセッサーやTypeScriptでのトランスパイルが多く使われるため、考慮しなければならない点が増え、設定ファイルが煩雑になってしまいます。
これによって、従来の「簡単に依存関係を解決してくれる」というメリットが失われつつあります。

Viteとは

Vite(ヴィート)とは、Vue.jsの作者のEvan You氏が開発したReact、Vue、Preactなどをサポートするフロントエンド開発ツールです。
No-bundle development toolとも言われますが、実際の所はJavaScriptアプリケーションの開発をサポートするためのモジュールバンドラーです。
webpackなどの従来のモジュールバンドラーとは異なり、ブラウザのNative ES Modulesを使用しているため、JavaScriptのモジュールをバンドルせずに開発を行うことができます。
よって、高速ビルドが可能なうえ、webpackにできることは大抵できます。

また、Viteは、State of JavaScript 2022において、最優秀採用技術賞、最優秀満足度賞、最優秀関心度賞の3つにノミネートされており、とても注目されている技術です。

Viteのメリット

高速ビルド

Viteでは、ブラウザのNative ES Modulesを使用しているため、より高速なビルドが可能になります。
詳細は後に記述します。
高速ホットリロード

Viteでは、HMRも同様にNative ES Modules上で実行されます。
ファイルが編集されたとき、Viteは編集されたモジュールとその最も近いHMR境界（ほとんどの場合モジュール自身だけ）を対象にする必要があるだけで、アプリケーションのサイズに関係なくHMRの更新を一貫して高速に行うことができます。

Viteはなぜ高速なのか

Viteが他と比べて早い理由は、その設計にあります。
まず、ViteはJavaScriptのモジュールを「依存モジュール」と「アプリケーションモジュール(ソースコード)」の2つにカテゴライズし、バンドル処理を行っています。
それぞれの意味合いとしては、以下の通りです。

依存モジュールとは

node_modulesフォルダからインポートした JavaScript モジュールです。これらのモジュールは、Go で書かれた JavaScript バンドラーであり、Webpack よりも 10-100 倍高速に動作するesbuild を使って処理・バンドルされます。

アプリケーションモジュール(ソースコード)とは

アプリケーション用に書くモジュールで、.jsx,.vue,.scssファイルなどのライブラリ固有の拡張子を含むことが多いです。

Viteのbuild処理方法

これら２点の違いの上で、Webpackのようなバンドルベースのワークフローでは、1つのブラウザリクエストの前にJavaScriptモジュール全体を処理する必要があります。
対して、Viteでは1つのブラウザリクエストの前に依存モジュールのみを処理します。
よって、Viteはアプリケーションモジュールをバンドルする時間を削減することができ、webpackにくらべて開発サーバにおけるビルド速度が格段に早くなり、開発者体験を大幅に向上させます。
さらに、この差はアプリケーションが巨大化すればするほどより顕著に現れます。
アプリケーションモジュールの処理方法の差分を図示したものが以下です。

比較表

こちらの記事で、大変わかりやすい比較表がありましたので、引用させていただきます。

	webpack	Vite
TypeScript トランスパイル	✅※ 別途 ts-loader が必要	✅
ES Modules 向けビルド	❌	✅
config ファイルを TypeSciript で書く	✅※ 別途ts-node が必要1)	✅
Split Chunk	✅※ 分割する処理を自前で定義する必要がある	✅※ 設定無しで npm パッケージとアプリケーションコードとで分割してくれる
Minify	✅※ npm パッケージのライセンスコメントを残す処理を別途定義する必要がある	✅※ 設定無しでライセンスコメントを残してくれる
アセットファイルのインポート	✅※ v4.x までは file-loader が必要	✅
dev server	✅※ 別途 webpack-dev-server が必要	✅
tsconfig#compilerOptions#jsx の react-jsx サポート	✅	✅※ config 設定で（擬似的に）サポート
HMR	✅	✅
source maps	✅	✅
グローバル変数注入（Define）	✅	✅
yarn workspace ( monorepo )	✅	✅
その他エコシステム	膨大なサードパーティ製プラグイン	Rollup 用プラグインが流用可能

最後に

最後に、Viteはプラグインを書くことによって、Viteの機能を拡張することもできます。
今回は割愛しますが、ぜひ使ってみてください。
間違い等ありましたら、コメントで教えていただけますと幸いです！

参考

https://vitejs.dev/guide/why.html

https://ics.media/entry/12140/

脚注

ページ全体を更新しなくても、実行時にブラウザ内のモジュールを自動的に更新することで開発者体験を向上させる仕組み ↩︎

概要