React.lazy 组件的依赖项没有被分割成单独的块

Question

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

\n\n

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

\n\n

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

\n