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

Houssein Djirdeh

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

Core Web Vitals への影響

使用していないコードを削除すれば Core Web Vitals をご覧ください。Largest Contentful Paint たとえば、アセットが不必要に大きくなると、未使用のコードによって影響を受けることがあります。 他のリソースと帯域幅を奪い合います。LCP は、ネットワークのサイズが大きい場合にも クライアントでのみマークアップをレンダリングする JavaScript アセット LCP 候補への参照が含まれます これらのリソースの読み込み時間を遅らせることで、より効果的にリソースを提供できます。

未使用のコードは、Interaction to Next Paint（INP）にも影響します。 使用していない JavaScript であってもダウンロード、解析、コンパイル、 実行されます。未使用のコードにより、リソース負荷で不要な遅延が発生する可能性があります。 ページの品質低下の原因となる時間、メモリ使用量、メインスレッドのアクティビティ 向上します

このガイドでは、プロジェクトのコードベースを分析し、使用されていないコードの有無を確認する方法について説明します。 では、配布先の JavaScript アセットから未使用のコードをプルーニングする戦略が提供されます。 おすすめします。

バンドルを分析する

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

  1. `Ctrl+Shift+J` キー（Mac の場合は `Command+Option+J`）を押して、DevTools を開きます。
  2. [ネットワーク] タブをクリックします。
  3. [キャッシュを無効にする] チェックボックスをオンにします。
  4. ページを再読み込みする。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> バンドル リクエストが表示されたネットワーク パネル
JavaScript ファイルのサイズを示す DevTools。

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

<ph type="x-smartling-placeholder">
</ph> DevTools のコード カバレッジ
[カバレッジ] タブ。

Node CLI で Lighthouse の完全な構成を指定すると、 「未使用の JavaScript を削減する」監査により、未使用のコードがどの程度 /

<ph type="x-smartling-placeholder">
</ph> Lighthouse を使用して未使用の JavaScript レポートを削減
使用していない JavaScript レポートを削減する。

webpack をバンドラとして使用する場合は、 Webpack Bundle Analyzer バンドルの構成要素を調べるのに役立ちます。プラグインを 他のプラグインと同様に、webpack 構成ファイルも追加します。

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

Webpack はシングルページ アプリケーションの構築によく使用されますが、 バンドラ（Parcel、 Rollup には、Chronicle 内でデータを バンドルの分析に使用できます

このプラグインを含めてアプリケーションを再読み込みすると、次のズーム可能なツリーマップが表示されます。 追加することもできます

<ph type="x-smartling-placeholder">
</ph> Webpack Bundle Analyzer
Webpack Bundle Analyzer のツリーマップ ビュー
。

この図は、バンドルのどの部分が これにより、ライブラリの数とサイズをより詳しく インポートされます。これにより、未使用のリソース サービス 不要です

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

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

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

使用されていないことがわかっている不思議なパッケージのために 上位の依存関係のどれが 依存関係にあるかを できます。必要なコンポーネントのみをインポートする方法を探します。 ライブラリを使用していない場合は、削除します。トレーニングでライブラリが 最初のページ読み込み（遅延読み込み）を検討 できます。

webpack を使っている場合は、リソース自動アップデートの 一般的なライブラリから未使用のコードを削除する。

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

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