快速查看当前node项目使用的依赖并生成图表_node 查看依赖包

node项目快速查看依赖使用情况

命令

在打包的命令后边加一个--report参数

npm run build --report
1

失败情况

如果在运行命令后你的项目没有打开依赖分修图，说明你的项目在创建时没有引入对应组件。

1. 安装组件

	npm i webpack-bundle-analyzer -s
1

2.引用配置

在webpack.config.js文件中加入以下代码。

首先头部引入BundleAnalyzerPlugin

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
1

其次在该文件中plugins依赖中加入 BundleAnalyzerPlugin初始化代码

new BundleAnalyzerPlugin({  // resource map
    analyzerPort: 1122, // 分析页面启动端口号
    openAnalyzer: true
}),
1
2
3
4

3.npm run build --report再来一遍

示例

END