Кажется, Webpack 4 и реагирующая на загрузку не создают правильный блок для рендеринга на стороне сервера. - PullRequest
Новая
       33

Кажется, Webpack 4 и реагирующая на загрузку не создают правильный блок для рендеринга на стороне сервера.

0 голосов
/ 06 сентября 2018

Я пытаюсь создать приложение ssr реагировать с ленивой загрузкой импорта. Все работает отлично, кроме не получает все необходимые куски

Мне также интересно, связано ли это с динамическим компонентом, основанным на ответе сервера 

enter code here

Редактировать - на самом деле он рендерит все необходимые куски, но полностью стирает все, когда клиентская сторона берет верх и рендерит снова

Поскольку он перерисовывает все, он сильно замедляется.

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)
}

Prod Server 

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

  })
});

Клиентская сторона 

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

Настройка Split Chunks 

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

Любое мнение или совет приветствуется, пожалуйста

Кто-то предложил попробовать с window.onload = () => {но этот подход также кажется замедленным.

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Я использую ориентированное на маршрут разбиение кода с помощью response-universal-component и flush chuck . Извините за длинный фрагмент кода / псевдо-код, я старался изо всех сил, чтобы сделать его короче. :)

Сначала создайте массив для реакции маршрутизатора, отображающего соответствующие компоненты 

let routeConfig = [
  {path: '/foo', component: 'Foo'},
  {path: '/bar', component: 'Bar'}
];
Функция

universal гарантирует, что компонент и его дочерние элементы могут быть правильно импортированы как на стороне сервера, так и на стороне клиента. Он достаточно умен, чтобы лениво загружать разделенные коды соответственно. 

import universal from 'react-universal-component';
const routes = routeConfig.map((item) =>{
  let route = {};
  route.path = item.path;
  route.component = universal(import(`./container/${item.component}`), options);
  return route;
});

Визуализация маршрутизатора в React Component. 

class App extends React.Component {
 render() {
    return (
      <div>
        <Switch>
          {routes.map( route => <Route key={ route.path } { ...route } />)}
        </Switch>
      </div>
);}}

Конфигурационный веб-пакет определяет имена разделения кода. 

  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, '../dist/client'),
    publicPath: '/xxxxxx/'
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
  })],
  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, 
          name: 'vendor' // bundle all the npm module as vendor.js
}}}}

Наконец, server.js будет использовать промывочный патрон для разделения кода. 

const chunkNames = flushChunkNames();
const {js, styles, cssHash, scripts, stylesheets} = flushChunks(clientStats, {chunkNames});
res.send(`<!doctype html>
  <html>
    <head>
      ${styles}
    </head>
    <body>
      <div id="root">${app}</div>
      ${cssHash}
      ${js}
    </body>
  </html>`);
0 голосов
/ 16 ноября 2018

Вы должны использовать ReactLoadablePlugin, чтобы получить список загружаемых импортов: 

new ReactLoadablePlugin({
  filename: './build/react-loadable.json',
})

Используя «реагировать на загружаемый захват», вы можете узнать, какие динамические компоненты необходимы при рендеринге, и вы можете добавить их комплекты в свойЗаголовочный файл: 

const content = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <Provider store={configureStore()}>
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>

    </Provider>
  </Loadable.Capture>
);

  let bundles = getBundles(stats, modules);
  bundles.map((item) => {
      //add js to header
      })

Это предотвращает стираемую и повторно воспроизводимую информацию загружаемой программой реакции.

Чтобы настроить Webpack для вывода правого чанка на основе динамически загружаемого компонента, выполните следующие действия: 

 optimization: {
    splitChunks: {
      cacheGroups: {
          default: false,
          vendors: false,
      }
  }
}

Эта конфигурация работает для меня в Webpack v4.

С полной документацией по работе с загружаемым рендерингом на стороне сервера React можно ознакомиться здесь:

https://github.com/jamiebuilds/react-loadable

...