这是我的设置：

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 emits all chunks after every change，但这根本没有帮助。