Webpack v4 creating tiny chunks (by route)

Question

This is some of the code I'm using in my React app. My routes are written using react-router-config which allows me to keep a centralized way so I know where to go always in order to modify or add some.

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Then, let's say the Child component is dinamically imported:

const Child = lazy(() => import('./Child'));

I would expect that the generated chunk includes Child, its imports/dependencies and the GrandChild and its imports/dependencies as well; but the reality is that the output is a tiny (1kb) file that includes only the lines of this component (Child).

How could I make webpack chunk all that matters for /child/:id route?

Answer 1

Given the lack of solutions out there for such an important feature (I have been searching everywhere for 3 days now), I ended up doing it kind of manually.

Webpack allows to specify the name of the chunk that a dynamic import will generate. If you use the same name for all the relevant components involved in a feature (if features are your approach to chunking), then you can do something like this:

/* ********************************** ACCOUNT ********************************** */
export const Account = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Account'));
export const MyConsumption = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyConsumption/MyConsumption'));
export const MyAccount = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyAccount/MyAccount'));
export const Settings = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Settings/Settings'));
export const Notifications = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Notifications/Notifications'));

/* ********************************** OTHER PRODUCTS ********************************** */
export const Sectors = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/Sectors'));
export const SectorsList = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorsList/SectorsList'));
export const SectorFile = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorFile/SectorFile'));
export const SectorRiskReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorRiskReport/SectorRiskReport'));
export const PressMail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/PressMail/PressMail'));
export const ValoraInfo = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraInfo'));
export const ValoraReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraReport'));

And the result will be chunks like this (notice the 2 chunks above the one in yellow, result of the code you see above):

This is something that is worth sharing and a way to create chunks that make sense. My main chunk is way lighter and the vendor one as well, so we can provide a progressive experience and cache the resources that will be used again and again by the user.

I hope I help someone out there.