JavaScript顶级条件await问题：生产环境组件依赖无法加载

这是因为Webpack开启experiments.topLevelAwait后，模块的处理逻辑和是否存在top-level await直接绑定：

• 只要模块里出现过任何top-level await语句（哪怕只在条件分支里），Webpack就会把整个模块标记为异步模块，模块的导出会被包裹在Promise中。其他模块导入它时，必须等这个Promise resolve后才能拿到正确的导出值。
• 你的生产环境分支原本没有await语句，模块会同步执行完成，但Webpack已经因为else分支的await把模块标记成了异步模块。此时consumer.tsx同步导入getDefault时，拿到的是还没初始化的undefined，调用getDefault会触发错误（可能被React错误边界或全局捕获机制吞掉，导致页面空白却没报错）。
• 当你给生产分支加上await Promise.resolve()后，两个分支都有top-level await，Webpack会确保模块在异步流程里完成初始化，consumer.tsx会等模块的Promise resolve后再执行，此时getDefault已经被正确赋值，调用正常，页面就能渲染了。

除了添加伪await的方式，还有两种更合理的处理方式：

1. 统一模块异步状态：不管生产还是开发环境，都维持模块的异步逻辑，避免Webpack的静态分析出现偏差

let getDefault;

if (env_mode === "production") {
    await Promise.resolve(); // 保持模块异步状态
    getDefault = (key, fallback) => fallback;
} else {
    const data = await import("./test-data/data");
    getDefault = (key, fallback) => data[key] ?? fallback;
}

export { getDefault };

2. 移除top-level await，改用同步条件导入：利用Webpack的tree-shaking特性，让生产环境自动剔除测试数据相关代码

let getDefault;

if (env_mode === "production") {
    getDefault = (key, fallback) => fallback;
} else {
    // 同步require，Webpack生产打包时会自动移除这个分支
    const data = require("./test-data/data");
    getDefault = (key, fallback) => data[key] ?? fallback;
}

export { getDefault };

这种方式不需要开启topLevelAwait，还能确保测试数据文件不会被打包到生产环境里。

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