Issue with common chunk plugin about pwa HOT 4 CLOSED

I see the problem but you haven't mentioned what it is that you're trying to achieve. Are you simply trying to add a new route? Or are you trying to add a new chunked route?

from pwa.

Thanks lakshya u looked into it. What i want to achieve is that suppose i am on pageA from which when i navigate i go to pageB then as soon as i navigate pageB bundle is downloaded, now from pageB i navigate to pageC so now pageC bundle is downloaded. There is no problem with this approach as in the route we can lazy import these bundles as per the route. What i want is PageA bundle contains PageB and PageC bundles also so that when i navigate from PageA to PageB then i already have PageB bundle. So bro let me know what i am doing wrong with mine webpack configuration.

from pwa.

The recommended approach to do this is to to wait for the LandingPage(PageA) route to render and then explicitly lazy import all the other routes FindPage and SearchPage(PageB and PageC) in the second .then of the LandingPage. For example:

<IndexRoute
  name="landing"
  getComponent={(_, cb) => {
    Promise.all([
      import('./views/LandingPage/LandingPage' /* webpackChunkName: 'landing' */),
      importCss('landing'),
    ]).then(([module]) => cb(null, module.default)).then(() => {
      import('./views/FindPage/FindPage' /* webpackChunkName: 'find' */);
      importCss('find');
      import('./views/CitiesPage/CitiesPage' /* webpackChunkName: 'cities' */);
      importCss('cities');
    });
  }}
/>

<Route
  name="find"
  path="/find/"
  getComponent={(_, cb) => {
    Promise.all([
      import('./views/FindPage/FindPage' /* webpackChunkName: 'find' */),
      importCss('find'),
    ]).then(([module]) => cb(null, module.default));
  }}
/>

<Route
  name="cities"
  path="/cities/"
  getComponent={(_, cb) => {
    Promise.all([
      import('./views/CitiesPage/CitiesPage' /* webpackChunkName: 'cities' */),
      importCss('cities'),
    ]).then(([module]) => cb(null, module.default));
  }}
/>

Advantage of this approach compared to bundling the 3 routes together is that you still keep separate chunks which means your time to first interactivity is still low. And, the other routes are lazy loaded on DOMContentLoaded so you're not competing for bandwidth with other critical resources.

from pwa.

Thanks bro... 👍

from pwa.