关于/*#__PURE__*/标注适用场景及相关问题的技术问询

根据Webpack官方文档说明：可以通过/*#__PURE__*/注解告知Webpack某函数调用无副作用（纯函数），该注解需放在函数调用前。传递给函数的参数不会被此注解标记，可能需要单独标记。当未使用变量的声明初始值被视为无副作用时，会被标记为死代码，不执行并被压缩器移除。

问题与解答 #

1. 何时标记函数调用的参数为纯函数是有用的？
   当外层函数调用本身需要被保留，但它的某个参数是未被使用的函数调用结果时，标记这个参数内的函数调用为纯函数就有实际意义。举个例子：

// 假设该函数会被使用，无法被 tree-shake
function createConfig(options) {
  return { ...options, base: 'foo' };
}

const config = createConfig({
  // 若这个辅助函数调用标记为纯函数，当打包器检测到config.debug完全未被使用时，可安全移除该参数的计算逻辑
  debug: /*#__PURE__*/ getDebugSettings(),
  apiUrl: '/api'
});

如果getDebugSettings()未被标记为纯函数，打包器会默认它存在副作用，即便config.debug没被用到，也可能保留这个函数调用。

2. 标记PropTypes.array调用是否有用？
   你的判断是正确的：给PropTypes.shape参数里的PropTypes.array(...)单独加/*#__PURE__*/是有用的，但给整个对象参数加标记没有效果——因为对象字面量不是函数调用。

具体来说，PropTypes.array(...)本身是函数调用，若标记为纯函数，当整个shape变量未被使用时，PropTypes.array的调用会和PropTypes.shape的调用一同被tree-shake移除；如果没加标记，打包器可能认为它存在副作用，即便shape没被使用，也可能保留这个函数调用。

3. export default /*#__PURE__*/ withSomeHOC(withAnotherHOC(...))能否按预期工作？
   两种写法都能按预期工作。Webpack会识别export default后函数调用上的/*#__PURE__*/注解，只要整个导出的模块未被其他地方引用，这个HOC链式调用就会被tree-shake掉。

需要注意：如果HOC链式调用中存在非纯函数调用，即使外层加了注解，打包器也无法安全移除整个调用链；另外，Webpack 4之前的部分旧场景中，直接在export default后加注解的支持不如先赋值给变量再导出稳定，但Webpack 5+的处理逻辑已经完善，两种写法没有区别。

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