如何为Angular应用程序使用webpackBundleAnalyzer

介绍

用户满意度受 Web 性能影响，而 Web 性能可能受大捆绑包大小的影响。当我们在项目中添加第三方模块时，每个依赖项都有自己的依赖项，这些依赖项会影响项目的大小。如果我们没有利用这些模块的所有功能，它们就会对我们的项目造成不必要的影响。

webpack Bundle Analyzer 是一种工具，可以帮助识别我们项目中使用的模块，并提供对可以修剪哪些模块的洞察力。

在本文中，您将学习如何使用 webpack Bundle Analyzer 和 Angular 来分析项目并进行合理的更改以减小项目大小。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
熟悉设置 Angular 项目。

本教程已使用 Node 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 的好处。使用 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.14 kB 增长到 1.36 MB。我们应该对此进行分析，看看我们能做些什么来降低这个值。让我们安装 webpack-bundle-analyzer 插件：

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

第 2 步 — 使用 `stats.json` 构建

Angular CLI 使我们能够使用开箱即用的 stats.json 进行构建。这允许我们将它传递给我们的包分析器并启动该过程。

我们可以向 package.json 添加一个新脚本来添加这个功能：

包.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 步 — 分析捆绑包

我们可以制作另一个 script 来运行 webpack-bundle-analyzer 和 stats.json：

包.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

分析将在网络浏览器中可视化：

哦哦！该分析表明，我们应该更好地删除捆绑包中未使用的项目。

第 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

分析将在网络浏览器中可视化：

该项目的大小已从 1.36 MB 更改为 563.13 kB。

结论

在本文中，您学习了如何使用带有 Angular 的 webpack Bundle Analyzer 来分析项目并进行合理的更改以减小项目大小。

继续学习如何使用自定义 webpack 配置进一步减小项目大小。