reactjs - NextJS 减少共享 JS 的首次加载

Question

在一个更大的项目中，我使用了相当多的第三方库，包括 firebase、redux 等以及一些更具体的库（但仅在几个页面上使用），如 konvaJS、jimp ......我最近刚迁移到 nextJS 以加快网站速度并可能允许 SSR。然而，在迁移之后，Lighthouse Speedtest 与 Pure React 版本相比下降了。主要问题似乎是共享 JS 首先加载包。

dynamic()经过一些优化，包括用&延迟加载更大的组件await import()，我设法将共享的首次加载 JS 包压缩了一半，但它们仍然在 400KB 左右，这太重了。我想像firebase这样的重型模块也包含在那里，因为应用程序中基本上到处都需要它。

我还尝试使用@next/bundle-analyzer. 但是可视化并不容易解释。它是否还列出了延迟加载的模块？此外，我在不同的包中多次打包了一些依赖项。最后但同样重要的是，分析器显示的包与输出的名称不匹配build。

非常感谢任何有助于减少或更好地理解该过程的帮助。我正在使用当前的 React 和 Next.js 版本。

编辑：这是构建后共享 JS 包的组成：

Edit2：我仍然对 bundle-analyzer 的输出感到困惑。例如，该模块jspdf仅用于一个页面/组件并延迟加载。它在分析仪中仍然可见是否正确？它对共享的 JS 包大小没有任何影响。

Edit3：我设法延迟加载我的 firebase 模块（这对我的应用程序至关重要），因此我节省了超过 200KB 的共享 JS 大小。仍然希望减少剩余的。顺便说一句，捆绑分析器的输出并没有真正改变。

标签： reactjswebpacknext.js