Next.js Pages Router环境下three.js未被Tree Shaking导致主chunk过大的优化解决方案求助

我目前的项目基于Next.js 14.2.4的Pages Router（我知道应该升级到App Router，但那是之后的事了），同时用到了React-three-fiber 8.17.7和three.js 0.168.0等依赖。

最近几天我一直在折腾优化这个React-three-fiber + Next.js站点，通过动态加载和Suspense已经把大部分问题解决了，但main.js主chunk的初始加载时间始终降不下来。我发现不管把_app.js写得多精简，用多少动态导入，页面都要等到main.js加载完成才会渲染任何内容。

更头疼的是，Next/webpack把整个three.module.js（超过1MB）都打包进了main.js里——哪怕我已经用动态导入延迟了使用three.js的组件，而且那些动态组件还会重复下载three.js！在网络限速的环境下，main.js和_app的大小完全一样，就是因为我在_app里引入了r3/drei的加载器。我本来希望初始加载只有40KB左右的HTML，但现在页面还是会一直空白到main.js加载完成。

我用Bundle Analyzer分析客户端代码，奇怪的是找不到next/chunk/main.js，但能清楚看到整个three.js包被打包进去了，可我明明只用到了里面大概2个功能。我试过Next的实验性包优化，但完全没用。

有没有大佬知道怎么把three.module.js从main.js里明确排除，或者让Next不要打包整个three.js包？我一直觉得three.js应该支持Tree Shaking，不应该打包这么大的体积啊。

内容来源于stack exchange