一昨日 GitHub のリポジトリのリンクを追加したんですが、なぜかプライベートリポジトリになっていてリンク先が見れなかったみたいで報告をいただき修正しました:bow:
Tree shaking is 何
前に調べたんだけど忘れる言葉シリーズとして Tree shaking があります。
なんで今日書こうと思ったのかというと、たまたま目にして「あれ、Tree shaking ってなんだっけ……？」となったからです。
なんか、曲がりなりにもフロントエンドエンジニアとして働いているのに、Tree shaking の意味忘れるって何……？と自分に幻滅したけど、このサイトはメモ置き場なのでどんな情けないことでもメモって置いておくということでここはひとつ。
MDN のウェブ関連用語の定義という項目にあったんだけど、モジュールバンドラーが複数の JavaScript のファイルをひとつにまとめるときに Tree shaking が行われて、コードの構造が整理されることでファイルサイズを小さくするのに必要らしい。
そもそも前提としてファイルサイズは小さければ小さいほど通信量が減り高速化につながるのでそれは分かるとして、複数のファイルをまとめるときにコードを整理するのはどうやるのだろうか、というのの答えが
ES2015 の import 文と export 文を利用して、エキスポートされたコードが他の JavaScript ファイルで利用されているかどうかを判定します。
ということらしい。
export されたコードが他のファイルで利用されているかどうかの判定……？
TypeScript の enum を使わないほうがいい理由を、Tree-shaking の観点で紹介します
この記事によると、
export しているのにどこからも import していないモジュールや、デッドコードなどを削除することができ、バンドルのサイズを減らすことができます。
らしい。
export しているのに import していないモジュールはまあたしかに削除してもよさそう。というかなんならビルド時じゃなくて普通にリポジトリに置いてあるものを検査してビルドする前に消したい気もするけどそういうツールってあるのかな。ありそうだけどな。
デッドコードはたぶん宣言されたけど使われていない変数とかかな。絶対に辿り着かない条件分岐の先の処理とかもここで削除されるのだろうか。まあたぶんエディタが起こってくれそうだけれど。
MDN Web Docs 用語集、すごいな
上述したけどMDN Web Docs 用語集: ウェブ関連用語の定義というページがあって、これテキトーに読んだら楽しそうと思ったので明日から雑に読んでいこうかな。
Tree shaking のページを見るに、細かくは説明されていないけど大雑把にどんなものかを把握するのにはよさそうな感じがする。知らない用語や前に調べたけど忘れた用語とかめちゃくちゃたくさんあると思うので、ちらほら眺めて知らないワードを明日からメモしていくようにしてみようかなと思う。