npm などのレジストリは、誰でも 50 万個を超える公開パッケージをダウンロードして使用できるようにすることで、JavaScript の世界を変革しました。しかし、使用していないライブラリが含まれていることもあります。この問題を解決するには、バンドルを分析して未使用のコードを検出し、未使用で不要なライブラリを削除します。
Core Web Vitals への影響
使用されていないコードを削除すると、ウェブサイトのウェブに関する主な指標を改善できます。たとえば、Largest Contentful Paint は、不要に大きなアセットが他のリソースと帯域幅を競合している場合、未使用のコードの影響をうける可能性があります。また、クライアントでのみマークアップをレンダリングする大規模な JavaScript アセットに LCP 候補への参照が含まれている場合、これらのリソースを読み込めるタイミングを遅らせることで LCP が影響を受ける可能性もあります。
未使用のコードは、Interaction to Next Paint（INP）にも影響する可能性があります。これは、未使用の JavaScript であっても、ダウンロード、解析、コンパイル、実行する必要があるためです。未使用のコードがあると、リソースの読み込み時間、メモリ使用量、メインスレッド アクティビティに不要な遅延が発生し、ページの応答性が低下する可能性があります。
このガイドでは、プロジェクトのコードベースを分析して未使用のコードを検出する方法と、本番環境でユーザーに配布する JavaScript アセットから未使用のコードをプルーニングする方法について説明します。
バンドルを分析する
DevTools では、すべてのネットワーク リクエストのサイズを確認できます。
- Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- [キャッシュを無効にする] チェックボックスをオンにします。
- ページを再読み込みする。
DevTools の [Coverage] タブには、アプリ内の CSS コードと JS コードの未使用の割合も表示されます。
Node CLI で Lighthouse の完全な構成を指定すると、Reduce unused JavaScript 監査を実行して、アプリケーションに付属する未使用のコードの量をトレースできます。
バンドルツールとして webpack を使用している場合は、Webpack Bundle Analyzer を使用して、バンドルの構成要素を調査できます。他のプラグインと同様に、このプラグインを Webpack 構成ファイルに含めます。
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
シングルページ アプリケーションの構築には webpack が一般的に使用されますが、Parcel や Rollup などの他のバンドルツールにも、バンドルの分析に使用できる可視化ツールがあります。
このプラグインを含めてアプリケーションを再読み込みすると、バンドル全体のズーム可能なツリーマップが表示されます。
このビジュアリゼーションでは、バンドルのどの部分が他よりも大きいかを示します。これにより、アプリケーションがインポートするライブラリの数とサイズをよりよく把握できます。これにより、未使用または不要なライブラリを使用しているかどうかを特定できます。
未使用のライブラリを削除する
上のツリーマップ画像では、単一の @firebase ドメイン内にかなりの数のパッケージがあります。ウェブサイトに必要なのが Firebase データベース コンポーネントのみの場合は、インポートを更新してそのライブラリを取得します。
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
どこでも使用されていないと思われる謎めいたパッケージについては、一度立ち止まって、どのトップレベルの依存関係がそのパッケージを使用しているかを確認します。必要なコンポーネントのみをインポートする方法を見つけてください。ライブラリを使用していない場合は、削除します。最初のページ読み込みにライブラリが必要ない場合は、遅延読み込みを検討してください。
webpack を使用している場合は、一般的なライブラリから未使用のコードを自動的に削除するプラグインのリストをご覧ください。
不要なライブラリを削除する
すべてのライブラリをパーツに分割して選択的にインポートできるわけではありません。このようなシナリオでは、ライブラリを完全に削除できるかどうかを検討してください。カスタム ソリューションを構築するか、より軽量な代替ソリューションを活用するかは、常に検討に値するオプションです。ただし、アプリからライブラリを完全に削除する前に、これらのいずれかの戦略に必要な複雑さと労力を検討することが重要です。