所有人共享的First Load JS在next.js中相当重 [英] First Load JS shared by all is rather heavy in next.js

问题描述

我有一个关于Next.js框架的项目，问题是所有页面共享的First Load JS相当重.
我想知道我可以考虑哪些可能的方面来减少它，也想知道我是否做错了什么.

我的下一个 js 版本:^10.0.3

构建时与页面相关的信息:

解决方案

我建议安装 @next/bundle-analyzer 以更好地了解您正在导入哪些依赖项以及哪些依赖项对文件大小有影响.这有助于识别可能被删除的任何未使用或不必要的库.

您还可以考虑使用代码拆分来减少应用程序初始加载的捆绑包.这可以通过使用 动态 import() 延迟加载代码来实现和/或 next/dynamic.p>

此外，如 Next.js 文档中所述，您可以使用其他工具来了解依赖项可以添加到您的包中的程度.

<块引用>

(...) 你可以使用以下工具可用于了解每个工具中包含的内容JavaScript 包:

• 导入成本 – 显示导入的大小在 VSCode 中打包.
• Package Phobia – 计算向您的项目中添加新的开发依赖项的成本项目.
• Bundle Phobia - 分析依赖项会增加多少捆绑包大小.

I have a project on Next.js framework and the problem is that First Load JS shared by all pages is rather heavy.
I want to know what possible aspects I can take into consideration to reduce it and also know if I'm doing something wrongly.

my next js version : ^10.0.3

information relating to pages while building :

解决方案

I would suggest installing @next/bundle-analyzer to get a better idea of what dependencies you're importing and which ones are contributing to that file size. This can help in identifying any unused or unnecessary libraries that could potentially be removed.

You can also look into using code splitting to reduce the bundle for the initial load of the application. This can be achieve by lazy loading code using dynamic import() and/or next/dynamic.

Furthermore, as mentioned in the Next.js documentation, there are other tools you can use to understand how much a dependency can add to your bundle.

(...) you can use the following tools to understand what is included inside each JavaScript bundle:

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

这篇关于所有人共享的First Load JS在next.js中相当重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！