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

npm を使用すると、プロジェクトにコードを簡単に追加できます。実際には 余分なバイト数が足りないのでしょうか

フセイン ジルデ

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

Core Web Vitals への影響

使用されていないコードを削除することで、ウェブサイトの Core Web Vitals を改善できます。たとえば、Largest Contentful Paint は、必要以上のアセットによって帯域幅の競合が増加し、未使用のコードの影響を受ける可能性があります。また、クライアントでのみマークアップをレンダリングする大規模な JavaScript アセットに、LCP 候補の読み込みを遅らせることで LCP 候補への参照が含まれている場合も、LCP に影響する可能性があります。

First Input Delay（FID）や Interaction to Next Paint（INP）などの他の指標も、使用されていない JavaScript をダウンロード、解析、コンパイルしてから実行する必要があるため、未使用のコードの影響を受ける可能性があります。コードが使用されないと、リソースの読み込み時間、メモリ使用量、メインスレッド アクティビティに不要な遅延が発生し、ページの応答性が低下する原因となります。

このガイドでは、プロジェクトのコードベースを分析する方法と、本番環境のユーザーに配布する JavaScript アセットから未使用のコードを取り除く方法を紹介することで、プロジェクトの未使用のコードを把握するのに役立ちます。

バンドルを分析する

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

1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
2. [Network] タブをクリックします。
3. [キャッシュを無効にする] チェックボックスをオンにします。
4. ページを再読み込みする。

DevTools の [カバレッジ] タブには、アプリケーションで使用されていない CSS コードと JS コードの数も表示されます。

Node CLI で Lighthouse の完全な構成を指定すると、「未使用の JavaScript」の監査を使用して、未使用のコードの量をアプリケーションとともに追跡することもできます。

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

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

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

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

この可視化により、バンドルのどの部分が他の部分よりも大きいかを調べたり、インポートしているすべてのライブラリをより的確に把握したりできます。これは、未使用のライブラリや不要なライブラリを使用しているかどうかを確認するのに役立ちます。

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

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

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

このプロセスは、大規模なアプリケーションでは非常に複雑であることを強調することが重要です。

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

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

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

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