Как я могу заставить webpack-dev-server прекратить загрузку некорректных блоков при изменении содержимого с помощью ленивого / приостановленного разделения кода React? - PullRequest
Новая
       27

Как я могу заставить webpack-dev-server прекратить загрузку некорректных блоков при изменении содержимого с помощью ленивого / приостановленного разделения кода React?

1 голос
/ 06 ноября 2019

Вот мои настройки: 

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 выдает все чанки после каждого изменения , и это не помогло вообще.

1 Ответ

0 голосов
/ 11 ноября 2019

Я думаю, что это связано с react-hot-loader

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

нашими внутренними процессами повторного рендеринга React Tree, который необходим для согласования обновленного приложениядо того, как React попытается перерисовать его

Так что я думаю, что используемый вами горячий загрузчик по своей конструкции попытается отобразить все дерево независимо от лени или текущего состояния, чтобы он мог согласоватьИзменения.

Можно рассмотреть вариант, вместо горячей перезагрузки всего приложения, как у вас, горячей перезагрузки <MobileApp /> и <DesktopApp /> отдельно с этими компонентами. Таким образом, вы можете сохранить лень приложения для разделения пакетов, которое работает под нагрузкой, но горячая перезагрузка изменяется в зависимости от используемого пакета.

...