配置Webpack为下一个JS中的页面组创建捆绑包_Webpack_Webpack 4_Next.js_Webpack Splitchunks

配置Webpack为下一个JS中的页面组创建捆绑包

webpack next.js

配置Webpack为下一个JS中的页面组创建捆绑包,webpack,webpack-4,next.js,webpack-splitchunks,Webpack,Webpack 4,Next.js,Webpack Splitchunks,我们正在构建一个相当大的应用程序，包含相当多的页面。这些页面可以划分为几个不同的页面组，这些页面组之间共享许多共同的依赖项，其他组中的页面不使用这些依赖项如果我要画一个粗略的简化依赖关系树，它将是以下几行：因此，基本上，有两个“类”的页面，PA和PB，我想用以下方式将依赖项拆分为捆绑包：所有页面之间共享的依赖项（在本例中为D-3），我希望在commons捆绑包中包含这些依赖项仅在PA页面（D-1和D-2）之间共享的依赖项，我希望将它们放在PA包中仅在PB页面（D-4和D-5）之间共

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

如果我要画一个粗略的简化依赖关系树，它将是以下几行：

因此，基本上，有两个“类”的页面，

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.config.Js

扩展next.Js的webpack配置，从而使用

optimization.splitChunks

生成包