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;