# 可视化依赖树分析.md

随着依赖的不断引入，导致项目中的依赖引入增多

想要通过代码文件的方式来分析所有的依赖不现实

webpack-bundle-analyzer plugin 插件提供了可视化的依赖图谱分析

# 安装

npm i webpack-bundle-analyzer -D

# 配置

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

# 查看可视化依赖

自动 (通过在宿主机打开 127.0.0.1:9888) 访问来查看可视化依赖图谱

# 问题

依赖显示 (modules concatenated)的问题

将 optimization.concatenateModules 选项设置为 false 即可覆盖在生产模式下的默认优化。

默认情况下，optimization.concatenateModules 在 production 模式下启用，而在其它情况下被禁用。

  optimization: {
    concatenateModules: false, // 关闭并联
  },

1
2
3