Bundle分析工具显示第三方库体积异常，怎么排查具体来源？

一明璨提问于 2026-02-18 16:48:22 阅读 38

优化

最近在优化Vue项目时用webpack-bundle-analyzer做Bundle分析，发现第三方库总占比高达70%，但具体到每个包都显示[name]@^[version]，完全看不出具体是哪些库？

尝试过在webpack配置里这样设置：


const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      generateStatsFile: true,
      statsOptions: { source: false }
    })
  ]
};

分析报告里的第三方库节点都像这样模糊显示：[name]@[version]，实际想知道是lodash还是axios占用了空间。查了文档没找到配置项能解决这个问题，有遇到过类似情况吗？

我来解答赞 2 收藏

反馈

1 条解答

筱萌 Lv1

这个问题我遇到过，主要是因为webpack的minimize和terser插件把包名给混淆了。复制这个配置试试：

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

module.exports = {

  optimization: {

    minimize: true,

    minimizer: [

      new TerserPlugin({

        terserOptions: {

          mangle: false,

          keep_classnames: true,

          keep_fnames: true

        }

      })

    ]

  },

  plugins: [

    new BundleAnalyzerPlugin({

      analyzerMode: 'static',

      generateStatsFile: true,

      statsOptions: { source: false }

    })

  ]

};

关键点是把Terser的mangle关掉，这样就不会混淆类名和函数名。另外建议你同时打开package.json看看dependencies和devDependencies，有些包可能被错误地打包进来了。

如果还是不行，可以试试这个命令，能帮你快速定位哪些包被引用了：

npm ls --prod --parseable | grep -v node_modules

实在找不到问题的话，直接在node_modules里全局搜索[name]@[version]这种格式，基本就能定位到是哪个包了。虽然土但很管用。

2026-02-18 17:09