序章
ユーザーの満足度は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-analyzer
v4.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 [email protected] [email protected]
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 [email protected]
ステップ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ブラウザで視覚化されます。
ええとああ! この分析は、バンドル内の未使用のアイテムを削除するためのより良い仕事をする必要があることを示しています。
ステップ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ブラウザで視覚化されます。
プロジェクトのサイズが1.36MBから563.13kBに変更されました。
結論
この記事では、Angularでwebpack Bundle Analyzerを使用してプロジェクトを分析し、プロジェクトのサイズを縮小するために賢明な変更を加える方法を学びました。
custom webpackconfigを使用してプロジェクトサイズをさらに縮小する方法を学び続けてください。