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これは、次の構成でによってロードされています。

  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

動作するはずです：

    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 に答える