如何在Vite/Rollup中预留window.FB全局变量名避免压缩冲突

问题描述 #

• 项目接入Facebook登录功能，开发环境、未开启压缩的构建包运行完全正常
• 开启bundle压缩后，一个由npm包引入的Node.js内置方法（来自_stream_readable.js）被混淆重命名为FB，挂载到window后直接覆盖Facebook SDK依赖的全局window.FB，导致SDK完全失效
• Facebook官方未提供SDK的其他访问入口，必须保证FB全局变量名不被打包生成的其他代码占用
• 已尝试的无效操作：
  • 配置build.output.globals.FB为其他值
  • 在入口文件提前声明window.FB尝试让压缩工具避让，均未生效
• 暂未定位到引入该Node.js方法的具体依赖，且该依赖为业务必需，无替代方案

解决方案 #

优先方案：配置压缩工具预留FB变量名 #

之前的配置无效是因为output.globals仅对标记为external的外部包生效，不会影响内部代码混淆时的变量名生成规则，直接在压缩器的混淆配置里指定保留关键字即可从根源解决问题。

• 如果你使用Vite默认的terser压缩，在vite.config.ts中添加如下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      mangle: {
        // 列出所有需要预留、不被用作混淆后变量名的标识符
        reserved: ['FB']
      }
    }
  }
})

• 如果你使用esbuild作为压缩器，对应配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: 'esbuild',
    esbuild: {
      // 预留FB标识符，不用于变量混淆命名
      reserve: ['FB']
    }
  }
})

该配置会直接告诉压缩工具，生成短变量名时跳过FB这个组合，不会有任何内部代码被重命名为FB，自然不会覆盖Facebook SDK的全局对象。

兜底方案：冻结全局FB对象 #

如果遇到特殊场景压缩配置不生效，可以在Facebook SDK加载完成后，立刻将window.FB设置为不可写，避免后续加载的业务代码覆盖该变量：

// 需在FB SDK加载完成回调中、业务代码执行前调用
Object.defineProperty(window, 'FB', {
  value: window.FB,
  writable: false,
  configurable: false
})

该方案作为兜底使用，优先选择压缩器配置的方案，不需要调整业务代码执行时序。

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