Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • バンドルを分析する
  • 未使用のライブラリを削除する
  • 不要なライブラリを削除する

未使用のコードを削除する

npmを使用すると、プロジェクトにコードを簡単に追加できます。しかし、あなたは本当に余分なバイトを全て使用していますか?

Nov 5, 2018
Available in: English、Español、Português、Русский、中文、한국어
Appears in: 読み込み時間の高速化
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
このページ内
  • バンドルを分析する
  • 未使用のライブラリを削除する
  • 不要なライブラリを削除する

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

バンドルを分析する #

DevToolsを使用すると、すべてのネットワークリクエストのサイズを簡単に確認できます。1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  1. Click the Network tab. 1. Select the Disable cache checkbox. 1. Reload the page.
バンドルリクエストのあるネットワークパネル

DevToolsのカバレッジタブには、アプリケーション内の未使用のCSSおよびJSコードの量も表示されます。

DevToolsのコードカバレッジ

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

Lighthouse Unused JS Audit

バンドラーとしてwebpackを使用している場合は、Webpack BundleAnalyzerがバンドルの構成要素を調査するのに役立ちます。他のプラグインと同様に、プラグインをwebpack構成ファイルに含めます。

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

webpackは通常、シングルページアプリケーションの構築に使用されますが、 ParcelやRollupなどの他のバンドラーにも、バンドルの分析に使用できる視覚化ツールが持っています。

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

Webpack Bundle Analyzer

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

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

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

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

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

どこにも使用されていないはずで不思議にみえるパッケージについては、見直し、どの優先依存性が使用しているかを確認してください。必要なコンポーネントのみをインポートする方法を見つけてください。ライブラリを使用していない場合は、ライブラリを削除してください。ライブラリが最初のページ読み込みに必要ない場合は、遅延読み込みできるかどうかを検討してください。

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

お試しください

未使用のコードを削除します。

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

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

パフォーマンス
最終更新: Nov 5, 2018 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Remove unused code
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.