React按需加载组件时引发的bug

对于一个大型工程来说，代码拆分是提高其性能和维护性的重要手段。而React中实现代码拆分的常用方式之一便是使用import()函数结合@loadable/component库。

然而，这种方式有时也会带来一些意想不到的问题。最近，笔者在项目中就遇到了一个令人困惑的加载报错，经过一番探索，终于找到了问题的根源。

问题现象

在使用import()动态加载一个React组件时，控制台报出如下错误：

Failed to load chunk "dynamic"

成因分析

由于项目工程庞大，使用了import()函数与@loadable/component结合进行组件的动态加载，从而实现Code Splitting的效果。一开始，笔者以为是组件本身出现了问题，但经过一番排查，发现组件本身并无问题。

仔细查看错误的调用栈，发现问题出现在@loadable/component库中：

/node_modules/@loadable/component/dist/loadable.esm.js
  275 |   // Check if we've already resolved.
  276 |   if (!internalState.promise) {
> 277 |     throw new Error('loadable: Error resolving code for chunk "dynamic"');
  278 |   }
  279 |
  280 |   const promise = internalState.promise;

由此可见，问题的原因在于loadable库内部的promise未能正确解析。

解决方法

经过进一步排查，发现问题出在项目使用了webpack 5。而webpack 5中，默认启用了module federation功能，该功能与@loadable/component库存在冲突。

要解决这个问题，需要在webpack配置中禁用module federation功能，具体方法如下：

module.exports = {
  module: {
    // 禁用module federation功能
    federation: undefined,
  },
};

总结

使用import()函数与@loadable/component库进行React组件的按需加载，可以有效提升大型项目的性能和维护性。但是，在使用时需要注意一些潜在的兼容性问题，比如与webpack 5中module federation功能的冲突。通过正确配置webpack，可以避免此类问题，确保组件的按需加载能够正常进行。