フロントエンド開発のツールチェインについて調べてみた
まずここからおさらい
「元のプログラムをシステムやアプリケーションの実行環境(ランタイムと言います)に合ったプログラムに変換すること」
code:mermaid
graph TD;
Typescript_TS_File-->|tsc Compiler|Transformed_JavaScript_JSFile;
JSX_File-->|Babel Copiler|Transformed_JavaScript_JSFile;
Transformed_JavaScript_JSFile-->Browser_or_Node.js
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数のスクリプトファイル</title>
</head>
<body>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
<script src="script4.js"></script>
</body>
</html>
https://scrapbox.io/files/6596446e01da440025012430.png
上記のようなファイルだと、通信がscriptタグの数＋HTMLファイルの読み込み分発生してしまう
バンドルがあれば、ファイルの依存関係を考慮した上でひとつのスクリプトファイルに束ねあげ、ネットワークパフォーマンスを最適化することができる
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バンドルされたスクリプトファイル</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
bundle.jsの読み込み+HTMLファイル読み込み分の通信しか発生しない
https://scrapbox.io/files/6597b94b9fe87e0024a5a3a6.png
https://scrapbox.io/files/659b9834529c020023d5dc77.jpeg
webpackは何をしているのか
code:bash
$ npm int
code:json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
@babel/core@7.1.0
@babel/cli@7.1.0
@babel/preset-env@7.1.0
@babel/preset-react@7.0.0
.....
Viteについて
開発中は Babel を SWC に置き換えます。ビルド時には、プラグインを使用する場合は SWC+esbuild、それ以外は esbuild を使用します。非標準の React 拡張を必要としない大きなプロジェクトでは、コールドスタートやホットモジュールリプレースメント（HMR）が大幅に高速化されます。
esbuild と Babel を使用し、小さなパッケージフットプリントで高速な HMR や、Babel 変換パイプラインを使用できる柔軟性を実現します。Babel プラグインを追加しない場合、ビルド時には esbuild のみが使用されます。
他のビルドツールについて(webkackの代替)