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

最新推荐文章于 2024-08-17 11:55:14 发布

Steven--Lee

最新推荐文章于 2024-08-17 11:55:14 发布

阅读量5k

点赞数 1

分类专栏： nodejs vue webpack 文章标签： node node_module 依赖 report

本文链接：https://blog.csdn.net/momDIY/article/details/103467343

版权

21 篇文章

订阅专栏

17 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何在Node项目中使用webpack-bundle-analyzer组件查看依赖使用情况。通过在npm run build命令后添加--report参数，可以生成依赖分析报告。若无法显示，需确保已安装并正确配置webpack-bundle-analyzer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

npm run build --report

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

	npm i webpack-bundle-analyzer -s

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

首先头部引入BundleAnalyzerPlugin

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

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

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

demo