接入步骤
安装依赖
// npm 方式
npm install webpack-bundle-analyzer --save-dev
// yarn 方式
yarn -D webpack-bundle-analyzer
复制代码
配置webpack.config.js文件
使用环境变量控制是否执行该 plugin,相关配置参数可查看 官方文档
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
plugins: [
// ... 其他 plugin 配置
process.env.ANALYZER && new BundleAnalyzerPlugin() // 使用默认配置
]
}
复制代码
配置package.json 文件
不同项目命令不同,根据自身的项目进行调整,这边是对 build 完后的包进行分析。
{
"scripts": {
"analyzer": "cross-env ENV_TYPE=staging ANALYZER=true node scripts/build.js"
}
}
复制代码
执行命令
npm run analyzer
// or
yarn analyzer
复制代码
执行效果
浏览器会自动打开 127.0.0.1:8888,可查看相关模块的依赖的组成
实战案例
案例一:发现同一库存在多个版本
发现竟然引入了三个 @ant-design/icons 的模块,先使用 npm 命令查看一下包的依赖状态
npm list @ant-design/icons
复制代码
结果:还真的依赖了 @ant-design/icons 的 v4.2.2 和 v4.4.0 两个版本
解决方式:将 @ant-design/icons 升级到 4.4.0 版本即可。
重新安装依赖再次分析后发现已经没有引入多个 @ant-design/icons 模块了。
持续更新中...