We are building a fairly large app, with quite a few pages. These pages can be divided to several distinct groups of pages that share many common dependencies among them, that are not used by pages in the other groups.
If I were to sketch a rough simplified dependency tree, it would be something along these lines:
So basically, two "classes" of pages, PA and PB, with dependencies I'd like to split into bundles in the following way:
Dependencies shared among all pages (D-3 in this case), which I'd like to have in the commons bundle;
- Dependencies that are only are shared between the
PApages (D-1andD-2), which I'd like to have in aPAbundle; - Dependencies that are only are shared between the
PBpages (D-4andD-5), which I'd like to have in aPBbundle; - Dependencies that are only used by a single page (
D-6), which should be part of that page's bundle
With the current setup, because D-3, D-4 and D-5 are used by more than half the pages in the app, they are bundled into the commons bundle, and therefore also loaded by PA type pages.
Is there a way to extend next.Js's webpack config through next.config.js to produce the bundles this way using optimization.splitChunks?
