React.lazy结合useMemo使用触发依赖表达式警告该如何解决？

问题定位 #

你收到该警告的核心错误操作是：封装useMemo + React.lazy逻辑时，给import()传入了动态变量表达式，而非固定的字符串字面量。

问题根源 #

webpack 的代码分割能力完全依赖编译阶段的静态扫描：
打包过程中webpack会自动识别所有import()语法，将括号内明确指定的字符串路径对应的模块单独拆分为异步chunk，实现懒加载效果。如果import()接收的参数是动态变量（例如你封装工具函数时，把组件路径作为入参传递给import），webpack在编译阶段无法确定最终要加载的具体模块，就会抛出该警告，同时会把所有路径可能匹配的文件都打包进首屏产物，完全失去路由懒加载减少首屏体积的作用。

额外优化提示 #

常规使用React.lazy时直接在组件外部顶层声明即可，不需要包裹useMemo，只有当你必须在组件内部动态创建懒加载组件时，才需要用useMemo避免重复执行lazy逻辑。

正确封装示例 #

如果需要提取公共逻辑，不要把路径作为动态参数传入import，改为把整个导入函数作为入参即可：

// 封装公共逻辑
const useLazyComponent = (importer) => {
  return useMemo(() => React.lazy(importer), [importer])
}

// 业务侧使用，import内仍为固定字符串字面量，webpack可正常识别
const Component = useLazyComponent(() => import('./Component'))

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