如何为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 配置 进一步减小项目大小。