React+Vite构建组件：压缩时避免生成$符号的问题求助

核心解决思路 #

Vite默认用Terser做代码压缩，之所以会出现$，是因为压缩器会自动生成短变量名，把$当成了可选的短标识符。要彻底杜绝这个问题，就得直接给Terser加规则，强制不让它用$当变量名。

具体配置步骤 #

在你的vite.config.js里加下面的Terser自定义配置，重点锁死$不让它被用作变量或属性名：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      mangle: {
        // 把$加入保留名单，不让压缩器把它当变量名
        reserved: ['$'],
        // 顺便把属性名也锁了，防止对象属性被压缩成$
        properties: {
          reserved: ['$']
        }
      },
      format: {
        // 强制用ASCII字符集，避免某些压缩逻辑偷偷生成$
        ascii_only: true
      },
      compress: {
        drop_console: true,
        // 关闭inline优化，防止自动生成短变量时用到$
        inline: false
      }
    }
  }
});

额外排查&适配点 #

• 如果项目里有第三方依赖本身就用了$，得在optimizeDeps.exclude里把这个依赖排除，单独处理它的压缩规则
• 建议把Vite升级到4.x以上版本，旧版本的Terser配置可能有兼容性问题
• 如果用的是ESBuild压缩（Vite部分场景默认用这个），得单独配置ESBuild规则：

build: {
  minify: 'esbuild',
  esbuild: {
    minifyIdentifiers: true,
    // 同样把$加入保留名单
    minifyIdentifiersOptions: {
      reserved: ['$']
    }
  }
}

验证方式 #

打包完成后，直接去dist目录下的JS文件里搜索$符号，确认只有业务代码中（如果有的话）的$，没有压缩器自动生成的即可。

内容的提问来源于stack exchange，提问作者Saman Pour