使用していないコードを削除する

Houssein Djirdeh

npm のようなレジストリは、誰でも 50 万を超える公開パッケージをダウンロードして使用できるようにすることで、JavaScript の世界をよりよく変革しました。しかし、完全に活用できていないライブラリが含まれていることもよくあります。この問題を解決するには、バンドルを分析して未使用のコードを検出し、未使用のライブラリと不要なライブラリを削除します。

Core Web Vitals への影響

使用されていないコードを削除することで、ウェブサイトのウェブに関する主な指標を改善できます。たとえば、Largest Contentful Paint は、不必要に大きなアセットが他のリソースと帯域幅を奪い合う場合、未使用のコードの影響を受ける可能性があります。クライアントでのみマークアップをレンダリングする大規模な JavaScript アセットに、LCP 候補への参照が含まれている場合も、LCP はリソースが読み込めるタイミングを遅らせることで LCP 候補への参照を含んでいる場合にも影響を受ける可能性があります。

未使用のコードは Interaction to Next Paint（INP） にも影響する可能性があります。これは、未使用の JavaScript でもダウンロード、解析、コンパイル、実行を行う必要があるためです。未使用のコードを使用すると、リソースの読み込み時間、メモリ使用量、メインスレッド アクティビティに不要な遅延が発生し、ページの応答性が低下する可能性があります。

このガイドでは、プロジェクトのコードベースを分析して未使用のコードがないかどうかを分析する方法と、本番環境でユーザーに配布する JavaScript アセットから未使用のコードをプルーニングする方法について説明します。

バンドルを分析する

DevTools では、すべてのネットワーク リクエストのサイズを確認できます。

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  2. [Network] タブをクリックします。
  3. [キャッシュを無効にする] チェックボックスをオンにします。
  4. ページを再読み込みする。
バンドル リクエストが表示されている [Network] パネル
JavaScript ファイルのサイズを示す DevTools。

DevTools の [カバレッジ] タブでは、アプリケーションの CSS コードと JS コードのうちどの程度使用されていないかを確認することもできます。

DevTools のコード カバレッジ
[カバレッジ] タブ。

Node CLI で完全な Lighthouse の構成を指定すると、未使用の JavaScript の削減の監査を実行し、未使用のコードの量をアプリケーションと一緒に追跡できます。

未使用の JavaScript レポートを削減する Lighthouse
使用していない JavaScript レポートを削減する。

webpack をバンドラとして使用する場合は、Webpack Bundle Analyzer を使用して、バンドルの構成要素を調査できます。他のプラグインと同様に、このプラグインを webpack 構成ファイルに含めます。

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

Webpack はシングルページ アプリケーションのビルドによく使用されますが、Parcel や Rollup などの他のバンドラにも、バンドルの分析に使用できる可視化ツールが用意されています。

このプラグインを含めてアプリケーションを再読み込みすると、バンドル全体のズーム可能なツリーマップが表示されます。

Webpack バンドル アナライザ
Webpack Bundle アナライザのツリーマップ ビュー

この可視化により、バンドルのどの部分が他の部分よりも大きいことが示されるため、アプリがインポートするライブラリの数とサイズをよりよく把握できます。これにより、未使用のライブラリや不要なライブラリを使用しているかどうかを確認できます。

未使用のライブラリを削除する

上のツリーマップの画像では、1 つの @firebase ドメイン内に多数のパッケージがあります。ウェブサイトで Firebase データベース コンポーネントのみが必要な場合は、そのライブラリを取得するようにインポートを更新します。

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

どこにも使用されていないことが確実な不思議なパッケージの場合は、一歩下がって、最上位の依存関係のどれがそのパッケージを使用しているかを確認します。必要なコンポーネントだけをインポートする方法を探してください。ライブラリを使用していない場合は、削除します。最初のページ読み込みでライブラリが必要ない場合は、ライブラリの遅延読み込みを検討してください。

webpack を使用している場合は、一般的なライブラリから未使用のコードを自動的に削除するプラグインのリストをご覧ください。

不要なライブラリを削除する

すべてのライブラリを分割して選択的にインポートできるわけではありません。このような場合は、ライブラリを完全に削除するかどうかを検討してください。カスタム ソリューションの構築や、より軽量な代替手段の利用は、常に検討する価値のある選択肢です。ただし、アプリからライブラリを完全に削除する前に、いずれかの戦略で必要となる複雑さと労力を考慮することが重要です。