懒加载组件内部能否嵌套另一个懒加载组件？

嵌套懒加载组件是完全可行的，React的lazy和Suspense原生支持多层嵌套的懒加载场景。你遇到的子组件和父组件“同时加载”的问题，本质是父组件渲染时会直接触发子组件的渲染逻辑，导致子组件的加载请求在父组件加载完成后立即发起，从表现上看像是同时加载，但并非技术上的不可行。

问题原因拆解 #

你的代码里，LazyLoaded组件一渲染就会渲染<LazyChild />，所以当LazyLoaded的模块加载完成并开始渲染时，React会立即尝试渲染LazyChild，进而触发import("./another-path")。这种情况下两个组件的加载请求会在短时间内连续发起，看起来像是同时加载，但实际上是父组件加载完成后才触发子组件的加载，并非真正意义上的同时加载。

实现真正按需加载的调整方案 #

如果想要子组件在特定条件下才加载（比如用户交互后），可以给子组件的渲染添加触发条件，示例如下：

修改LazyLoaded组件：

import { useState, lazy, Suspense } from 'react';

const LazyChild = lazy(() => import("./another-path"));

const Lazy = () => {
  const [showChild, setShowChild] = useState(false);

  return (
    <>
      <button onClick={() => setShowChild(true)}>加载子组件</button>
      {showChild && (
        <Suspense fallback={<div>Child loading</div>}>
          <LazyChild />
        </Suspense>
      )}
    </>
  );
}

export default Lazy;

这样只有当用户点击按钮后，LazyChild才会被渲染，对应的import请求才会发起，实现真正的按需加载。

关键注意事项 #

• 每个懒加载组件都需要对应的Suspense包裹，也可以将Suspense提升到更高层级（比如父组件的Suspense可以同时覆盖子组件的加载状态，不过会统一显示父组件的fallback内容）。
• 部分打包工具（如Webpack）默认带有预加载逻辑，如果不希望子组件被预加载，可以通过工具配置禁用相关行为。

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