Minify vs Bundle vs Tree-shake: それぞれ何をするか

ビルドパイプラインがこの用語を曖昧にしますが、それぞれ異なることをします。

Minify

動作を変えないすべてを削除: 空白、コメント、長い名前。

Bundle

多くのファイルを少ないHTTPリクエストに連結。

Tree-shake

importされたが実行されないコードを削除。ESMが必要。

組み合わせ順序

1. Bundle

2. Tree-shake

3. Minify

4. Compress

モダンなデフォルト

Vite、esbuild、webpack、Bunすべて。