7

这是我的设置：

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具有以下配置的 a 加载的：

  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 在每次更改后都会发出所有块，但它根本没有帮助。

4

2 回答 2

1

我认为这与react-hot-loader

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

我们重新渲染 React 树的内部流程，这是在 React 尝试重新渲染之前协调更新的应用程序所必需的

所以我认为你正在使用的热加载器，按照设计，会尝试渲染整个树，不管是懒惰还是当前状态，这样它就可以协调变化。

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

于 2019-11-11T18:14:05.723 回答
-1

应该管用：

    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 => (
        <Suspense fallback={<AppLoading />}>
            shouldServeMobile
            ?
              <MobileApp />
            : <GlobalDesktopStyle />
              <DesktopApp />
         </Suspense>

    );
于 2019-11-18T03:36:30.783 回答