# 可视化依赖树分析.md
随着依赖的不断引入,导致项目中的依赖引入增多
想要通过代码文件的方式来分析所有的依赖不现实
webpack-bundle-analyzer
plugin 插件提供了可视化的依赖图谱分析
# 安装
npm i webpack-bundle-analyzer -D
1
# 配置
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
entry: "./src/main.js",
output: {
// ...其他配置
},
module: {
rules: [
// ...其他配置
],
},
plugins: [
// ...其他配置
new BundleAnalyzerPlugin({
analyzerMode: "server",
analyzerHost: "127.0.0.1",
analyzerPort: "auto", // 自动使用未使用的端口 或者 '9888'自行设置
openAnalyzer: true,
generateStatsFile: false,
statsOptions: null,
logLevel: "info",
}),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 查看可视化依赖
自动 (通过在宿主机打开 127.0.0.1:9888) 访问来查看可视化依赖图谱
# 问题
- 依赖显示
(modules concatenated)
的问题
将 optimization.concatenateModules 选项 设置为 false 即可覆盖在生产模式下的默认优化。
默认情况下,optimization.concatenateModules 在 production 模式 下启用,而在其它情况下被禁用。
optimization: {
concatenateModules: false, // 关闭并联
},
1
2
3
2
3