如何通过React Lazy / Suspense代码拆分使webpack-dev-server停止在内容更改时停止下载不正确的块？

Question

这是我的设置：

const DesktopApp = lazy(() => import(/* webpackChunkName: "DesktopApp" */'./DesktopApp'));
const MobileApp = lazy(() => import(/* webpackChunkName: "MobileApp" */'./MobileApp'));

type Props = { shouldServeMobile: boolean };

export const App = ({ shouldServeMobile }: Props): JSX.Element => (
  shouldServeMobile
    ? (
      <Suspense fallback={<AppLoading />}>
        <MobileApp />
      </Suspense>
    ) : (
      <Suspense fallback={<AppLoading />}>
        {/* GlobalDesktopStyle is injected in multiple places due to a bug where the
          theme gets reset when lazy loading via React.Lazy + webpack */}
        <GlobalDesktopStyle />
        <DesktopApp />
      </Suspense>
    )
);

这是由webpack-dev-server具有以下配置的加载的：

  devServer: {
    contentBase: paths.output.path,
    // this host value allows devices on a LAN to connect to the dev server
    host: '0.0.0.0',
    https: true,
    port: 9001,
    hotOnly: true,
    // lets any URL work
    historyApiFallback: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

现在，假设我们正在渲染

import { hot } from 'react-hot-loader/root';
// some imports omitted

const HotApp = hot(App);

ReactDOM.render(
  <HotApp shouldServeMobile={true} />,
  document.getElementById('root')
);

在初始加载时，这可以正常工作。该MobileApp数据块下载和DesktopApp没有。但是，一旦我更改了组件中的任何数据并HMR开始使用-重新加载就会下载DesktopApp块。

这显然破坏了代码拆分的目的。有谁知道如何阻止这种情况的发生？

需要说明的是：我已经输出了console.log(shouldServeMobile)，它始终是true。另外，我在这里尝试了以下建议：Webpack-dev-server每次更改后都会发出所有块，这完全没有帮助。

Answer 1

我认为这与react-hot-loader

根据https://github.com/gaearon/react-hot-loader

我们重新渲染 React Tree 的内部流程，需要在 React 尝试重新渲染之前协调更新的应用程序

因此，我认为您使用的热加载器在设计上将尝试渲染整个树，无论惰性或当前状态如何，以便它可以协调更改。

一个需要研究的选项可能是不像您那样热重新加载整个应用程序，而是在这些组件中单独热重新加载<MobileApp />和。<DesktopApp />这样，您可以保持应用程序对于捆绑包分割的惰性，这在加载时起作用，但热重载会根据所使用的捆绑包而变化。