Angular：使用webpack Bundle Analyzer进行性能分析

Web performance is possibly one of the most important parts to take into account for a modern web application. The thing is, it’s easier than ever to add third party modules and tools to our projects, but this can come with a huge performance tradeoff.

Web性能可能是现代Web应用程序考虑的最重要的部分之一。 事实是，向我们的项目中添加第三方模块和工具比以往任何时候都容易，但这可能会带来巨大的性能折衷。

This becomes even more difficult the larger a project becomes, therefore, this article looks at how to use webpack Bundle Analyzer with Angular to help visualize where code in the final bundle comes from.

随着项目的扩大，这变得更加困难，因此，本文着眼于如何将Webpack Bundle Analyzer与Angular结合使用，以帮助可视化最终bundle中的代码来自何处。

新项目和添加依赖项 (New project and Adding Dependencies)

To establish a common base, we’ll create a brand new Angular application and add some dependencies:

为了建立通用基础，我们将创建一个全新的Angular应用程序并添加一些依赖项：

# Install the Angular CLI globally
$ npm i @angular/cli -g

# Create a new Angular project of your choosen name && change directory
$ ng new AngularBundleAnalyser

> N
> SCSS

$ cd AngularBundleAnalyser

$ npm i moment
$ npm i firebase

# Open this up in VS Code
$ code . && ng serve

We can then head over to app.component.ts and import these into our main.js bundle:

然后，我们可以转到app.component.ts并将它们导入到我们的main.js包中：

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import * as firebase * from 'firebase';

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

Our bundle has gone from about 9kB to 24kB. We should analyze this to see what we can do to get this lower. Let’s install the webpack-bundle-analyzer plugin:

我们的捆绑包从大约9kB变为24kB。 我们应该对此进行分析，以了解如何降低这一水平。 让我们安装webpack-bundle-analyzer插件：

$ npm i webpack-bundle-analyzer -D

使用stats.json构建 (Building with stats.json)

The Angular CLI gives us the ability to build with a stats.json out of the box. This allows us to pass this to our bundle analyzer and start the process.

Angular CLI使我们能够直接使用stats.json进行构建。 这使我们可以将其传递给我们的捆绑分析器并开始该过程。

We can add a new script to package.json to add this functionality:

我们可以向package.json添加新脚本以添加此功能：

"scripts": {
  "build:stats": "ng build --stats-json"
}

Now we can run npm run build:stats to generate a stats.json file inside of the dist folder! Let’s do that:

现在我们可以运行npm run build:stats在dist文件夹中生成一个stats.json文件！ 让我们这样做：

$ npm run build:stats

捆绑分析 (Bundle Analysis)

We can make another script which runs the webpack-bundle-analyzer with the stats.json:

我们可以让另一个script它运行webpack-bundle-analyzer与stats.json ：

"scripts": {
  "analyze": "webpack-bundle-analyzer dist/AngularBundleAnalyser/stats.json"
}

Run the analyzer with the following command:

使用以下命令运行分析器：

$ npm run analyze

You should then be able to see your analysis over at localhost:8888:

然后，您应该可以在localhost:8888上查看分析结果：

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

Uh oh. This tells us that we should do a better job of removing un-used items within our bundle. Let’s see this example by only importing initializeApp from firebase:

哦哦 这告诉我们，我们应该做得更好，删除捆绑包中的未使用物品。 让我们通过仅从firebase导入initializeApp来查看此示例：

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment'
import { initializeApp } 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 = {};
    initializeApp(firebaseConfig);
  }
}

This makes the following difference within our bundle analysis:

这在我们的捆绑销售分析中具有以下差异：

摘要 (Summary)

Become one with your bundle. Understand what you can do to make it smaller and further-optimized. The webpack-bundle-analyzer tool is perfect for this!

与您的捆绑包合二为一。 了解如何使它更小并进一步优化。 webpack-bundle-analyzer工具非常适合此功能！

翻译自: https://www.digitalocean.com/community/tutorials/angular-angular-webpack-bundle-analyzer