0

I have been trying to use react loadable library with Webpack 4. On the SSR the page loaded correctly(all async import stuff loaded). However, the async components are gone for a split sec. react-loadable.json does not seems to have correct info since it does not fetch all the required chunks for the page(somehow shows correctly in server side). When I console.log chunks only few chunks shows up. Could this because some route is dynamic?

Please look at attached screen shot below

Initiated by Script is the refetching part

enter image description here Parse is happening in server side and script part happens in client side

How I capture the required chunks from react-loadable.json

  renderToString(
            <Provider store={store}>
              <StaticRouter location={urlPath} context={context}>
                <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                  <AppRoot/>
                </Loadable.Capture>
              </StaticRouter>
            </Provider>
          )



console.log('last',  getBundles(stats, modules))

Prod Server 

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

  })
});

Client side

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

Split Chunks setup

    styles: {
      name: 'styles',
      test: /\.css$/,
      chunks: 'all',
      enforce: true
    },
    vendors: {
      name: 'vendors',
      chunks: 'all',
      reuseExistingChunk: true,
      priority: 20,
      enforce: true,
      test(module, chunks) {
        const name = module.nameForCondition && module.nameForCondition();
        return chunks.some(chunk => {
          return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
        })
      }
    },
    common: {
      name: 'app.js',
      chunks: 'initial',
      test: /\.js$/,
      reuseExistingChunk: true,
    },

I would love to provide more info if it is necessary

fiddlest
  • 1,262
  • 2
  • 17
  • 42

1 Answers1

-1

I think I had a similar issue with one of my projects. I think I solved it by wrapping the client side function like below 

window.onload = () => { 
  Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })
}
Shane Mckenna
  • 59
  • 2
  • I cannot share repo its for work not my personal stuff .. I can share chunk of code not all repo for sure – fiddlest Sep 07 '18 at 14:00
  • No worries, I think I had a similar issue with one of my projects. I think I solved it by wrapping the client side function with window.onload = () => {} – Shane Mckenna Sep 07 '18 at 22:22
  • Actually this approach cannot be used since it slow down meaningful paint by a lot a lot – fiddlest Sep 11 '18 at 14:38