webpack Bundle Analyzer 使用入门

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

---

前言

在web应用开发中，性能可谓是最重要的指标之一。
虽然今天我们的项目中添加第三方模块和工具比以往任何时候都要容易，但是很多时候这可能会以牺牲性能为代价。
随着项目规模的增大，提高性能将变得更加困难，因此，本文将介绍如何使用webpack Bundle Analyzer来帮助我们分析项目
代码结构，从而减小打包的体积，优化angular的性能。

介绍

webpack Bundle Analyzer是一个可视化的工具，能够分析和生成打包输出后文件大小互动缩放树形图。详情

开始使用

1 使用npm安装

npm i webpack-bundle-analyzer -D

2 向package.json添加统计功能

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

3 生成统计文件
(由于在第二步，这是下面的命令相当于ng build --stats-json)
运行这个命令后，统计出的数据将会保存到dist文件夹下的stats.json文件

  np