Angular 编译优化工具——Bundle Analyzer

webpack-bundle-analyzer 是什么 可以做什么

当我们需要分析打包文件dist里哪些资源可以进一步优化时，就可以使用包分析器插件webpack-bundle-analyzer。
webpack-bundle-analyzer 可以让我们看到 Webpack进行打包，到底打了多少包，每个包有多大
NPM上的介绍是 使用交互式可缩放树图可视化 webpack 输出文件的大小

环境

$ ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.5
Node: 16.13.1
Package Manager: npm 8.1.2 
OS: darwin arm64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1402.5 (cli-only)
@angular-devkit/core         14.2.5 (cli-only)
@angular-devkit/schematics   14.2.5 (cli-only)
@schematics/angular          14.2.5 (cli-only)

在angular 中如何使用 webpack-bundle-analyzer

ng new bundleDemo   ### 创建一个 angular cli

cd bundleDemo

npm install --save-dev [email protected]

npm install [email protected] lodash

在 app.component.ts 中引入这两个插件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const time = moment.utc();
    _.forEach([1,2,3,4,5,5,6,7,7], item => {
        console.log('[ item ] >', item)
    })
  }
}

在 package.json scripts 中添加

"build:stats": "ng build --stats-json"
"analyze": "webpack-bundle-analyzer dist/bundle-demo/stats.json"

执行 npm run build:stats && npm run analyze 打开分析表

webpack-bundle-analyzer 如何分析 bundle

从上图可以看出 dist 文件中最大的 文件是 moment 和 lodash

1. moment 会将插件内所有的语言打包进去
2. lodash 虽然只用的一个方法，还是被整体打包

结论 ： 如果插件没有按按需加载，会将整个插件打包到项目中

webpack-bundle- analyzer打包优化的可能性

优化方案

1. 更换其他时间插件 例如 dayJs

2. lodash 按需引入（通过按需引入的方式，lodash 缩小了500K）

其他优化方案

同一个库存在多版本
使用 npm list packageName 查看当前包在这里项目里有多少个不同的版本 选其中一个最高版本升级即可