はじめに
Tree Shaking, Minify, Code Splittingというキーワードについて簡単に調べてみたので記録する。
詳細
Tree Shaking
- 実行されないコードを削除すること(木を揺らして余計なものを振り落としているイメージ)
- JavaScriptの文脈で利用される用語です。
- ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のこと.
Minify
- ホームページの表示を高速化する目的で、ホームページのファイル（HTMLファイル、CSSファイル、JavaScriptファイルなど）のサイズを小さくすること
- 不要なスペースやインデントなどを削除したり、関数名や変数名を短いものに置き換えたりすることでソースコードのサイズを圧縮する。
- minifyされたソースコードは人間には読みにくくなってしまうが、プログラムとしては問題なく実行できる。
(ソースコードは開発者が記述しやすいように、また、後で保守する際に読みやすいように、人間にとって分かりやすい表記法などを用いて記述されることが多いが、長い変数名や関数名、タブ文字や連続した空白文字（スペース）など、動作には直接影響しない冗長な要素が含まれる) - 人間には読解しにくい酷い見た目のコードになるが、同じ動作を維持したままサーバのデータ転送量を削減できるため、多くの人に同じファイルを配布する場合などに用いられる。
- 変換の過程で変数名などの情報は欠落して元に戻すことはできなくなるため、ある種の非可逆圧縮となっている。この特徴を逆手に取り、コードを盗み取られたり解析されにくくなるよう難読化（obfuscation）する用途を兼ねる場合もある。
- webpackではいくつかのminify用プラグインが用意されているが、webpack 4系では前述の「–mode」オプションで「production」を指定するだけで自動的に出力コードがminifyされる。
Code Splitting
- その名の通り「コードを分割し別ファイルとすること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。
- webpackのこの機能により、コードを様々なバンドル（塊）に分割し、オンデマンドまたは並列でロードすることができるようになる。
- より小さなバンドルを実現し、リソースの負荷の優先順位を制御するために使用することができ、正しく使用すれば、ロード時間に大きな影響を与えることができる。
- webpackのコード分割には、一般的に3つのアプローチがあります。
-
Entry Points: エントリーポイント。エントリーポイントの設定により、手動でコードを分割する -
Prevent Duplication: 重複を防ぐ。エントリーの依存関係やSplitChunksPluginを使用して、チャンクの重複排除と分割を行う。 -
Dynamic Imports: 動的なインポート。モジュール内のインライン関数呼び出しでコードを分割します。
-
おわりに
調べてみた結果、大体は想像していたとおりであったが、Minifyで変数名も短くなることなど周辺の細かい情報は読んでいた楽しかった。
今後もwebpackの機能に関する情報があればこちらに追記していきたい。