reactjs - React.lazy 组件的依赖项未拆分为单独的块

Question

我正在尝试使用 React.lazy() 来减小我们主要的 webpack 包的大小。我延迟加载的组件已成功拆分为自己的 js 块，在需要时按需下载。

但是，延迟加载组件的依赖项仍然包含在主 js 包中。这是预期的行为吗？如何正确地将延迟加载组件的依赖关系拆分为它们自己的块或包含在延迟加载组件的块中？

// This code is part of our main bundle
const LazySection = React.lazy(() => import('./BaseSection'));
const Section = (
    <Suspense>
        <LazySection />
    </Suspense>
);
​
export default Section;
​
​
// This code is split into its own chunk
import { OtherComponent } from './OtherComponent ';
import { NonReactStuff } from './NonReactStuff'; 
// NonReactStuff is included in main bundle. How can I split into a separate lazy loaded chunk 
// or part of the BaseSection chunk?
​
const BaseSection = () => (
    <OtherComponent  item={ NonReactStuff } />
);

export default BaseSection;