Angularアプリ用のwebpackバンドルアナライザーの使用方法

投稿日: 2022-04-20 2022-04-20
タグ: Angular

序章

ユーザーの満足度はWebパフォーマンスの影響を受け、Webパフォーマンスは大きなバンドルサイズの影響を受ける可能性があります。プロジェクトにサードパーティのモジュールを追加すると、各依存関係には、プロジェクトのサイズに寄与する独自の依存関係があります。これらのモジュールのすべての機能を利用していない場合、それらはプロジェクトのサイズに不必要に貢献しています。

webpack Bundle Analyzer は、プロジェクトで使用されているモジュールを識別し、どのモジュールをプルーニングできるかについての洞察を提供するのに役立つツールです。

この記事では、Angularでwebpack Bundle Analyzerを使用してプロジェクトを分析し、プロジェクトのサイズを縮小するために適切な変更を加える方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Angularプロジェクトのセットアップにある程度精通している。

このチュートリアルは、ノードv16.2.0、npm v7.18.1、@angular/core v12.0.4、およびwebpack-bundle-analyzerv4.4.2で検証されました。

ステップ1—プロジェクトの設定

共通の基盤を確立するために、まったく新しいAngularアプリケーションを作成し、いくつかの依存関係を追加します。

まず、@angular/cliを使用して新しいプロジェクトを作成します。

ng new angular-bundle-analyzer-example --routing=false --style=css --skip-tests

次に、新しく作成されたプロジェクトディレクトリに移動します。

cd angular-bundle-analyzer-example

この時点で、ng buildを実行して、プロジェクトの初期サイズを確認できます。

Output| Initial Total | 170.14 kB

このチュートリアルでは、webpack-bundle-analyzerの利点を視覚化するために2つのパッケージに依存します。 npmを使用して、momentおよびfirebaseをインストールします。

npm install moment@2.29.1 firebase@8.6.8

app.component.tsを開き、momentとfirebaseをmain.jsバンドルにインポートします。

src / app / app.component.ts

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import firebase from 'firebase';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const time = moment.utc();
    const firebaseConfig = {};
    firebase.initializeApp(firebaseConfig);
  }
}

ビルドエラーを防ぐために、app.component.htmlの@angular/cliで自動的に生成されるtitleも削除する必要があります。

src / app / app.component.html

<span>{{ title }} app is running!</span>

この時点で、ng buildを実行して、バンドルのサイズを確認できます。

Output| Initial Total |  1.36 MB

私たちのプロジェクトは約170.14kBから1.36MBに成長しました。これを分析して、これを低くするために何ができるかを確認する必要があります。 webpack-bundle-analyzerプラグインをインストールしましょう。

npm install --save-dev webpack-bundle-analyzer@4.4.2

ステップ2—`stats.json`を使用して構築する

Angular CLIを使用すると、stats.jsonをそのまま使用してビルドできます。これにより、これをバンドルアナライザーに渡して、プロセスを開始できます。

package.jsonに新しいスクリプトを追加して、この機能を追加できます。

package.json

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:stats": "ng build --stats-json",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

これで、次のコマンドを実行できます。

npm run build:stats

このコマンドは、プロジェクトのdistディレクトリにstats.jsonファイルを生成します。

ステップ3—バンドルの分析

stats.jsonでwebpack-bundle-analyzerを実行する別のscriptを作成できます。

package.json

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:stats": "ng build --stats-json",
  "analyze": "webpack-bundle-analyzer dist/angular-bundle-analyzer-example/stats.json",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

次に、次のコマンドを使用してアナライザーを実行します。

npm run analyze

このコマンドは、webpack-bundle-analyzerを開始します。

OutputWebpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

そして、分析はWebブラウザで視覚化されます。

Screenshot of webpack Bundle Analyzer analysis. Various modules are depicted in different-sized boxes. Some modules that are not directly used for Firebase have large boxes.

ええとああ！この分析は、バンドル内の未使用のアイテムを削除するためのより良い仕事をする必要があることを示しています。

ステップ4—変更を適用する

app.component.tsに再度アクセスして、firebase/appからfirebaseのみをインポートするように変更できます。

src / app / app.component.ts

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  implements OnInit {
  ngOnInit(): void {
    const time = moment.utc();
    const firebaseConfig = {};
    firebase.initializeApp(firebaseConfig);
  }
}

変更を保存して、次のコマンドを実行します。

npm run build:stats

次に、次のコマンドを実行します。

npm run analyze

そして、分析はWebブラウザで視覚化されます。

A second screenshot of webpack Bundle Analyzer analysis. The relative size of the boxes for Firebase modules are smaller than before.

プロジェクトのサイズが1.36MBから563.13kBに変更されました。

結論

この記事では、Angularでwebpack Bundle Analyzerを使用してプロジェクトを分析し、プロジェクトのサイズを縮小するために賢明な変更を加える方法を学びました。

custom webpackconfigを使用してプロジェクトサイズをさらに縮小する方法を学び続けてください。

getdocs

13036

序章