イントロ
TypeScriptやJavaScriptを実装した際、ブラウザーに表示されるまでに背景で起きていることをまとめます。
プロセス
- Transpilation(TypeScriptのみ）：TSは実装前に、TypeScript Compiler(tsc)でJSへと変換（Transpile)される
- Bundling：WebpackやRollupを使って、１つのファイルに統合（Bundle)される。そうすることで、HTTPリクセストの回数を減らせる
- Minification:コメントや空白などの余計な部分をコードから取り除き、コードのサイズを最適化する。これにより、ブラウザでのダウンロードを早くする。
- Execution & Compilation: 最後に、Just-In-Time (JIT) などのエンジンが上記で最適化されたJSコードをブラウザーで実走する。並行して、JSコードはByteCodeというMahcine言語よりもAbstractなフォーマットへ変換している。より頻繁に使われるコード（Hot Path)は、より最適なMachine言語（Bytecode=>Binary)に変換され、Interpreterで実装するよりも高いパフォーマンスを出すことができる。
Sourcemaps Generation: これらの他に、TranspileやMinificationの過程で、Sourcemapが構成され、ブラウザーでのDebugが可能になる。このSourcemapは、TranspileやMinificationされたコードと元のコードへと復元したもの（簡単に言えば、オリジナルコードから無駄を省いたもの）
JIT Compiler
Bundlingとフレームワーク
BundlingはHTTPリクエストを減らすことができるという点で需要なステップである。Bundlingをせずに、JSコードを実装すると、ファイスの数だけHTTPリクエストが必要となり、ネットワークコミュニケーションやサーバーサイドでのプロセスが追加される（Latencyが追加される）。
イメージとしては、車を使わず人力でモノを運ぶため、何度も往復し、モノを渡す側が何度も同じような作業を繰り返さなければいけない現象に類似する。
従って、Bundlingにより、Webサイト（Webアプリ）のローディングが素早くなり、全体としてパフォーマンスが向上する。
React.jsは裏でWebpackがBundleツールとして使われているため、Create React App(CRA)で作成されたWebアプリは自動的にWebpackでBundleされる事になる。
npx create-react-app my-app
勿論、ejectでこのデフォルト設定を上書きすることもできるが、一度このコマンドを使うとConfigファイルやWebpackの設定をプロジェクトにコピーし、以降デフォルト設定を無視する事になるので、注意点としては、一度ejectを使ったら元に戻れないということです。
npm run eject
代替策としては、react-app-rewiredがある。