简介
用户满意度会受到Web性能的影响，而较大的捆绑包大小可能会影响Web性能。当我们在项目中添加第三方模块时，每个依赖项都有自己的依赖项，这些依赖项决定了项目的大小。如果我们没有利用这些模块的所有功能，它们就会不必要地增加我们的项目规模。
Webpack Bundle Analyzer是一个工具，它可以帮助识别我们的项目中使用的模块，并提供有关哪些模块可以修剪的洞察。
在本文中，您将学习如何使用带角度的webpack捆绑分析器来分析项目，并做出合理的更改以缩小项目规模。
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 对设置角度project.》有所了解
本教程已通过Node v16.2.0、npm v7.18.1、@angular/core v12.0.4和webpack-bundle-analyzer v4.4.2验证。
第一步-设置项目
为了建立一个公共基础，我们将创建一个全新的角度应用程序并添加一些依赖项。
首先，使用@angular/cli创建一个新项目：
1ng new angular-bundle-analyzer-example --routing=false --style=css --skip-tests
然后，导航到新创建的项目目录：
1cd angular-bundle-analyzer-example
此时，我们可以运行ng Build来确定我们项目的初始规模。
1[secondary_label Output]
2| Initial Total | 170.14 kB
本教程将依靠两个包来可视化webpack-Bundle-analyzer的好处。使用npm安装oment和Firebase：
1npm install [email protected] [email protected]
打开app.component.ts，将moment和firebase导入main.js包：
1[label src/app/app.component.ts]
2import { Component, OnInit } from '@angular/core';
3import * as moment from 'moment';
4import firebase from 'firebase';
5
6@Component({
7 selector: 'app-root',
8 templateUrl: './app.component.html',
9 styleUrls: ['./app.component.css']
10})
11export class AppComponent implements OnInit {
12 ngOnInit(): void {
13 const time = moment.utc();
14 const firebaseConfig = {};
15 firebase.initializeApp(firebaseConfig);
16 }
17}
为了防止构建错误，我们还应该去掉app.Component.html中的@Angel/cli自动生成的Title：
1[label src/app/app.component.html]
2<span>{{ title }} app is running!</span>
此时，我们可以运行ng Build来确定包的大小：
1[secondary_label Output]
2| Initial Total | 1.36 MB
我们的项目已经从大约170.14 kB增长到1.36MB。我们应该分析这一点，看看我们可以做些什么来降低这一点。让我们安装webpack-Bundle-analyzer插件：
1npm install --save-dev [email protected]
Step 2 -使用stats.json构建
棱角分明的CLI使我们能够使用开箱即用的`stats.json‘构建。这允许我们将其传递给捆绑包分析器并开始该过程。
我们可以在package.json中添加一个新的脚本来添加这个功能：
1[label package.json]
2"scripts": {
3 "ng": "ng",
4 "start": "ng serve",
5 "build": "ng build",
6 "build:stats": "ng build --stats-json",
7 "watch": "ng build --watch --configuration development",
8 "test": "ng test"
9},
现在，我们可以运行以下命令：
1npm run build:stats
该命令会在工程的dis目录下生成stats.json文件。
第三步-解析Bundle
我们可以制作另一个脚本，它用stats.json运行webpack-Bundle-analyzer：
1[label package.json]
2"scripts": {
3 "ng": "ng",
4 "start": "ng serve",
5 "build": "ng build",
6 "build:stats": "ng build --stats-json",
7 "analyze": "webpack-bundle-analyzer dist/angular-bundle-analyzer-example/stats.json",
8 "watch": "ng build --watch --configuration development",
9 "test": "ng test"
10},
然后，使用以下命令运行分析器：
1npm run analyze
该命令将启动webpack-Bundle-analyzer：
1[secondary_label Output]
2Webpack Bundle Analyzer is started at http://127.0.0.1:8888
3Use Ctrl+C to close it
分析结果将在网络浏览器中可视化：
啊哦！这一分析表明，我们应该更好地删除捆绑包中未使用的物品。
第四步-应用更改
我们可以重新访问app.Component.ts，并将其修改为只从Firebase/app导入Firebase：
1[label src/app/app.component.ts]
2import { Component, OnInit } from '@angular/core';
3import * as moment from 'moment';
4import firebase from 'firebase/app';
5
6@Component({
7 selector: 'app-root',
8 templateUrl: './app.component.html',
9 styleUrls: ['./app.component.scss']
10})
11export class AppComponent implements OnInit {
12 ngOnInit(): void {
13 const time = moment.utc();
14 const firebaseConfig = {};
15 firebase.initializeApp(firebaseConfig);
16 }
17}
保存您的更改并运行以下命令：
1npm run build:stats
然后，运行以下命令：
1npm run analyze
分析结果将在网络浏览器中可视化：
小
项目大小从1.36MB变为563.13 kB。
结论
在本文中，您学习了如何使用webpack捆绑分析器分析项目，并做出合理的更改以缩小项目规模。
继续学习如何通过自定义webpack config.]进一步缩小项目规模