Create React App生产构建中APS Viewer的executeUserFunction失效问题

原因分析 #

Create React App生产构建的Tree Shaking机制会移除未被显式标记为“使用中”的代码，而executeUserFunction若通过全局对象调用、或属于Web Worker依赖的隐式引用，大概率被误判为无用代码剔除。

解决方案 #

1. 显式标记避免Tree Shaking #

在调用executeUserFunction的文件顶部添加代码，强制打包工具保留该方法：

// 显式绑定全局方法，防止被Tree Shaking移除
window.executeUserFunction = window.executeUserFunction;

如果该方法来自第三方库，在package.json中标记对应文件为有副作用：

{
  "sideEffects": [
    "./node_modules/your-3d-library/path-to-executeUserFunction.js"
  ]
}

2. 规范Web Worker的依赖引入 #

若executeUserFunction用于Web Worker，确保Worker文件中显式导入该方法，而非依赖全局对象：

// 在Worker文件中直接导入
import { executeUserFunction } from 'your-3d-library';

// 或如果是全局方法，在Worker开头显式声明
declare const executeUserFunction: (data: any) => Promise<any>;

3. 调整Webpack构建配置（可选） #

如果上述方法无效，用craco（无需eject）修改Webpack规则：

1. 安装craco：npm install @craco/craco --save-dev
2. 替换package.json中的脚本："build": "craco build"
3. 创建craco.config.js：

module.exports = {
  webpack: {
    configure: (config) => {
      // 针对目标模块禁用Tree Shaking
      config.module.rules.push({
        test: /your-3d-library/,
        sideEffects: true
      });
      return config;
    }
  }
};

4. 验证构建结果 #

执行npm run build后，检查打包文件是否包含该方法：

grep "executeUserFunction" build/static/js/*.js

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