介绍

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

webpack Bundle Analyzer 是一种工具，可以帮助识别我们项目中使用的模块，并深入了解可以修剪哪些模块。

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

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 对设置 Angular 项目有一定的了解。

本教程已通过 Node v16.2.0、npmv7.18.1、@angular/corev12.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. 使用npm安装moment和firebase：

npm install moment@2.29.1 firebase@8.6.8

打开app.component.ts并导入moment并firebase进入我们的main.js包：

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);
  }
}

为了防止构建错误，我们还应该删除title自动生成的@angular/cliin 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来添加此功能：

"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

此命令将stats.json在项目dist目录中生成文件。

第 3 步 — 分析捆绑包

我们可以制作另一个script运行webpack-bundle-analyzer与stats.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：

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

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

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

第 4 步 – 应用更改

我们可以重新审视app.component.ts并修改它，只需要导入firebase来自firebase/app：

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.36 MB 更改为 563.13 kB。

结论

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

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