Terser 压缩后 React 组件报错，是配置问题吗？

自娴 ☘︎ 提问于 2026-03-30 05:39:17 阅读 3

优化

我在用 Webpack 打包 React 项目时启用了 TerserPlugin，但压缩后的代码在浏览器里报错：Cannot read property ‘map’ of undefined。本地开发没问题，一上线就崩，怀疑是 Terser 把某些变量名混淆出错了。

我试过关闭 compress 和 mangle，错误就消失了，但包体积又变大了。有没有人遇到过类似情况？是不是要加什么保留规则？

const UserList = ({ users }) => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

Terser

我来解答赞 3 收藏

反馈

1 条解答

志青 Dev Lv1

我一般直接在 Terser 配置里加个保留规则搞定这事。试试这个：

optimization: {

  minimize: true,

  minimizer: [new TerserPlugin({

    terserOptions: {

      mangle: {

        properties: {

          regex: /^_/ // 只混淆以下划线开头的属性

        }

      },

      keep_fnames: /UserList/, // 保留特定函数名

      keep_classnames: true

    }

  })],

}

记得检查下 users 数据来源，说不定是 API 返回了 undefined。这破问题折腾过好几次了，烦死了。

2026-03-30 06:02