こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com
かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる
そんな中で、個人的に覚えておきたいと思ったものをメモしておく
ビルド最適化
- すべてのアセット（JavaScript、画像、フォント、サードパーティスクリプト、およびカルーセル、複雑なインフォグラフィック、マルチメディアコンテンツなど、ページ上の「高価な」モジュール）のインベントリを実行し、それらをグループに分類し、何を扱っているかを知っておくこと
- 2つの別々のJavaScriptバンドルをコンパイルして提供する
<script type="module">を使用 - Tree Shaking、スコープホイスト、コード分割を使う
- Tree Shakingは、本番環境で実際に使用されるコードのみを含めてビルドプロセスをクリーンアップし、Webpackで未使用のインポートを排除する方法
- スコープホイストはインポートチェーンをフラット化して1つのインライン関数に変換する機能
- コード分割は、コードベースをオンデマンドでロードされる「チャンク」に分割するもう1つのWebpack機能
長いので、後日続きをメモする、、、
