配置 Webpack 为 Next JS 中的页面组创建捆绑包

Question

我们正在构建一个相当大的应用程序，有很多页面。这些页面可以分为几个不同的页面组，这些页面之间共享许多共同的依赖关系，而其他组中的页面不使用这些依赖关系。

如果我要画一个粗略简化的依赖树，它会是这样的：

所以基本上，页面的两个“类”，PA以及PB，我想通过以下方式将其依赖项拆分为捆绑包：所有页面之间共享的依赖项（D-3在本例中），我希望将其包含在commons捆绑包中；

• 仅在PA页面 (D-1和D-2) 之间共享的依赖项，我希望将其捆绑在一起PA；
• 仅在PB页面 (D-4和D-5) 之间共享的依赖项，我希望将其捆绑在一起PB；
• 仅由单个页面 ( D-6) 使用的依赖项，它应该是该页面捆绑包的一部分

在当前设置下，由于D-3、D-4和D-5被应用程序中超过一半的页面使用，因此它们被捆绑到包中commons，因此也由PA类型页面加载。

有没有办法扩展 next.Js 的 webpack 配置next.config.js以使用这种方式生成捆绑包optimization.splitChunks？