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
- moment 会将插件内所有的语言打包进去
- lodash 虽然只用的一个方法,还是被整体打包
结论 : 如果插件没有按按需加载,会将整个插件打包到项目中
webpack-bundle- analyzer打包优化的可能性
优化方案
更换其他时间插件 例如 dayJs
lodash 按需引入(通过按需引入的方式,lodash 缩小了500K)
其他优化方案
同一个库存在多版本
使用 npm list packageName 查看当前包在这里项目里有多少个不同的版本 选其中一个最高版本升级即可