web-dev-qa-db-ja.com

Webpack 4とreact loadableはサーバー側レンダリング用の正しいチャンクを作成しないようです

私は遅延読み込みインポートでssr反応アプリを作成しようとしています。それ以外のすべてが正常に動作します必要なチャンクのすべてがフェッチされません。

これがサーバーの応答に基づく動的コンポーネントに関連しているかどうかも疑問に思っています

編集-必要なすべてのチャンクを実際にレンダリングしますが、クライアント側が引き継いで再びレンダリングすると、全体を消去します

すべて再レンダリングするため、速度が大幅に低下します。

enter image description here

パーサーはサーバー側で発生し、クライアント側が引き継ぐと、さらにフェッチされますserver.js

 const history = createHistory({
    initialEntries: [urlPath],
  })
  // const history = createHistory()
  const store = configureStore(history, {
    location: {
        ...
    },

  })

  const context = {}
  const htmlRoot = (
    <Provider store={store}>
      <StaticRouter location={urlPath} context={context}>
        <AppRoot />
      </StaticRouter>
    </Provider>
  )

  // pre fetching data from api
  store
    .runSaga(rootSaga)
    .done.then(() => {

        const RTS = renderToString(htmlRoot) + printDrainHydrateMarks()
        const head = Helmet.renderStatic() 
        console.log(printDrainHydrateMarks())

        res.status(code).send(renderDom(RTS, port, Host, storeState, head))
      }
    })
    .catch(e => {
      console.log(e.message)
      res.status(500).send(e.message)
    })

  renderToString(htmlRoot)
  console.log(printDrainHydrateMarks())

  store.close()
} else {
  res.status(500).send(_err)
}

製品サーバー

Loadable.preloadAll().then(() => {
  app.listen(PROD_PORT, (error) => {

  })
});

クライアント側

Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })

分割チャンクのセットアップ

    styles: {
      name: 'styles',
      test: /\.css$/,
      chunks: 'all',
      enforce: true
    },

どんな意見やアドバイスも大歓迎です

誰かがwindow.onload =（）=> {を試してみることを提案しましたが、このアプローチも遅くなるようです。

reactjswebpacklazy-loadingwebpack-4
20
fiddlest

ReactLoadableSSRAddonの使用を検討する必要があります。ReactLoadableによって提供されるプラグインよりもうまく機能します 詳細については、このリンクを参照してください 。私の場合、それは大きな違いをもたらしました！

0
jav974