javascript - 所有人共享的First Load JS在next.js中相当重

Question

我有一个关于 的项目Next.js 框架，问题是所有页面共享的First Load JS相当重。

我想知道我可以考虑哪些可能的方面来减少它，也想知道我是否做错了什么。

我的下一个 js 版本:^10.0.3
构建时与页面相关的信息:

Answer 1

我建议安装 @next/bundle-analyzer 更好地了解您正在导入哪些依赖项以及哪些依赖项会影响该文件大小。这有助于识别可能被删除的任何未使用或不必要的库。
您还可以考虑使用代码拆分来减少应用程序初始加载的捆绑包。这可以通过使用 dynamic import() 的延迟加载代码来实现。和/或 next/dynamic .
此外，如 Next.js documentation 中所述，您可以使用其他工具来了解依赖项可以添加到您的包中的程度。

(...) you can usethe following tools to understand what is included inside eachJavaScript bundle:

• Import Cost – Display the size of the imported package inside VSCode.
• Package Phobia – Find the cost of adding a new dev dependency to yourproject.
• Bundle Phobia - Analyze how much a dependency can increasebundle sizes.