Angular 编译优化工具——Bundle Analyzer

KenkoTech

于 2023-02-13 10:00:46 发布

阅读量339

点赞数

分类专栏： Angular 文章标签： angular

本文链接：https://blog.csdn.net/KenkoTech/article/details/129002951

版权

Angular 专栏收录该内容

55 篇文章 8 订阅

订阅专栏

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 webpack-bundle-analyzer@4.4.2

npm install moment@2.29.1 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

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

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

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

优化方案

更换其他时间插件例如 dayJs

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

其他优化方案

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