如何为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 安装 momentfirebase

npm install moment@2.29.1 firebase@8.6.8

打开 app.component.ts 并将 momentfirebase 导入到我们的 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-analyzerstats.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 配置 进一步减小项目大小。