Zenn
♨️

Vite Buildの概要

に公開
JavaScript
tech
esbuild
Vite
tech

今までなんとなくで使っていたBuildって何してるんだっけー

なんのためにBuildが行われているのか

私たちが書いたソースコードを、Webブラウザが効率的かつ正確に動作するように変換・最適化するため。ブラウザが理解し、効率的に実行できる『実行可能ファイル』を作成するため。

Buildすると何が起こるのか？　（ビルドプロセス）

ざっくり、、主に5つのことが行われる。

  • トランスパイル(Transpile)
    • JavaScript（ES6以降）、TypeScript、JSXなどの構文を、より広くブラウザがサポートしているJavaScript（主にES5）に変換
  • バンドル(Bundle)
    • アプリケーションを構成する複数のJavascriptファイル、CSSファイルなどのアセットファイルを最終的にブラウザがロードする少数の大きなファイルに結合
  • ミニファイ/ 圧縮(Minify/Comperess)
    • バンドルされたコードから、空白、改行を削除しファイルサイズを削減
  • 最適化(Optimize)
    • デッドコードを最終的なバンドルから削除 (ツリーシェイキング)
    • 画像の圧縮, WebPなどへ変換。リサイズを行いファイルサイズを削減
  • アセットの処理とハッシュ化
    • 画像、フォント、その他の性的なアセットを適切に処理、ファイル名にユニークなハッシュ値を追加する。hoge.png → hoge.1wfu3sa.png

こららのプロセスを、一つずつ私たちが行うのは複雑で時間もかかるため、「ビルドツール」によって自動化されている。便利だ〜

Viteとは？

フロントエンドビルドツール。Viteは大きく2つの主要な部分で構成されている。

  1. 非常に高速な開発サーバー（ネイティブ ES モジュール(ESM)と esbuild の活用）
  2. Rollup でコードをバンドルするビルドコマンド（プロダクションビルド）

ESM、esbuildとは何なのか、なぜ高速なのか、Rollupとは、、を見ていく

https://vite.dev/guide/

ESM(ECMAScript Modules)

ECMAScriptに公式に組み込まれたモジュールシステムのこと。JavaScriptのコードをモジュールに分割し、お互いにimport,exportして連携させるための標準的な方法を提供する。かつてJavaScriptには公式のモジュールシステムがなく、CommonJSなどモジュールシステムが誕生し、環境ごとで独自の書き方が必要だった。こうした問題を解決し、ブラウザとNode.jsの両方で統一的に使えるモジュールシステムとして導入された。

  • ESMの特徴
    • import と export キーワードを使うことができる。(今まで何気に使っていた、export, importってESMのおかげだったんだ、、、)
    • HTMLの <script type="module"> を使うことで、JavaScript ファイルをモジュールとして直接ブラウザに読み込ませることができる。
// math.js (エクスポート)
export function add(a, b) {
  return a + b;
}

// main.js (インポート)
import { add } from './math.js';
console.log(add(1, 2)); // 3

esbuild

ビルドプロセスの,トランスパイル、バンドル、ミニファイを行う。

なぜ esbuild はなぜ速いのか by gemini
(とにかく速いらしい、、)

Go言語で記述されている: Go言語は、JavaScriptなどのスクリプト言語よりも低レベルで、コンパイルされたコードは非常に高速に実行されます。また、Go言語の並行処理の機能（ゴルーチンなど）を最大限に活用しており、複数の処理を同時に効率的に実行できます。
ゼロ依存性: 外部ライブラリへの依存がほとんどなく、これにより軽量で高速な起動が可能です。
単一パス処理: 多くの処理を一度のパス（読み込み）で行うように設計されており、ファイルの読み書きや解析のオーバーヘッドを最小限に抑えています。

なぜViteは高速なのか？（ESMとesbuildの連携）

上の方の、

  1. 非常に高速な開発サーバー（ネイティブ ES モジュール(ESM)と esbuild の活用）
    Viteが速い開発理由は、ESMのネイティブサポートとesbuildの連携させているから。
  • ESMの活用
    • Viteの開発サーバーは、ソースコードをESMとしてブラウザに直接提供する。ブラウザがESMを理解できるため、Viteは開発時に大規模なバンドル処理を行う必要がない。
    • ブラウザはHTMLの<script type="module">を読み込み、そこからimport文をたどって必要なモジュールをオンデマンドでVite開発サーバーにリクエストする。

ということをしていて、プラスしてesbuildを組み合わせることでさらに早くなってるってことっぽい

Rollup

Rollupは、JavaScriptのモジュールバンドラーの一つで、特にJavaScriptライブラリやアプリケーションのコードを効率的にバンドルすることに特化している。

  • ViteにおけるRollupの役割
    プロダクション環境向けのビルドを生成する際に、モジュールバンドラーであるRollupをメインのバンドラーとして内部的に使用している。

なんで、プロダクションビルドでesbuildを利用しないのかなって思ったけど、ここに書いてあった。
esbuildは非常に高速ですが、Viteが採用しているRollupのプラグインAPIほど柔軟ではないとのこと。

Rolldownと呼ばれる、Rollup の Rust ポートを構築する取り組みが進行中。

へー。

https://ja.vite.dev/guide/why#なぜ-esbuild-でバンドルしないのか

最後に

今まで「なんとなく」buildしてたけど、少し言語化できた気もする。
次は、コードを紐解いて深く見ていきたい。

Discussion