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文件

  npm run build:stats

4 修改package.json加入生成图形功能

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

5 运行run命令
(执行这个命令后，可以通过浏览器访问localhost:8888看到分析打包结果。若显示空白换个浏览器即可）

npm run analyze

分析文件打包文件

通过生成的报告，我们可以了解到项目中各个文件的体积，从而可以通过改变导包方式来减少打包后生成文件的体积。
这个报告可以帮助我们：
1.了解项目打包后真正内容
2.找出项目中块构的构成以及各个模块的尺寸
3.找到多余模块
4.优化!