🥴

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

2023/01/21に公開約4,300字

概要

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ファイルなどのライブラリ固有の拡張子を含むことが多いです。

上記の上で、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://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56
https://radixweb.com/blog/webpack-vs-vitejs-comparison
https://blog.recruit.co.jp/rmp/front-end/post-21250/
https://zenn.dev/antez/articles/58307946cf4f3e
https://ics.media/entry/12140/

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

Discussion

ログインするとコメントできます