reactjs - 如何使用 React 惰性/Suspense 代码分割让 webpack-dev-server 停止在内容更改时下载不正确的 block ？

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 block 会下载，而 DesktopApp 不会下载。但是，一旦我更改组件中的任何数据并且 HMR 启动 - 重新加载就会下载 DesktopApp block 。

这显然违背了代码分割的目的。有人知道如何阻止这种情况发生吗？

需要明确的是:我已经输出了 console.log(shouldServeMobile) 并且它始终为 true。另外，我在这里尝试了建议:Webpack-dev-server emits all chunks after every change而且根本没有帮助。

Answer 1

我认为这与react-hot-loader有关

每https://github.com/gaearon/react-hot-loader

our internal processes of re-rendering React Tree, which is required to reconcile an updated application before React will try to rerender it

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

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