所有人共享的 First Load JS 在 next.js 中相当重
ali*_*ili 25 javascript reactjs next.js
我有一个关于Next.js框架的项目，问题是所有页面共享的 First Load JS 相当重。
我想知道我可以考虑哪些可能的方面来减少它，也知道我是否做错了什么。
我的下一个 js 版本：^10.0.3
构建时与页面相关的信息：
jul*_*ves 33
我建议安装@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.
您还可以考虑使用代码分割来减少应用程序初始负载的包。这可以通过使用动态import()和/或延迟加载代码来实现next/dynamic.
此外，Next.js 在其文档中还提到了其他工具，您可以使用这些工具来了解可以向您的包添加多少依赖项。
\n\n\n为了减少发送到浏览器的 JavaScript 数量，您可以使用以下工具来了解每个 JavaScript 包中包含的内容：
\n\n
\n- 进口成本 \xe2\x80\x93 Display the size of the imported package inside VSCode.
\n- Package Phobia \xe2\x80\x93 查找向项目添加新的开发依赖项的成本。
\n- Bundle Phobia - 分析依赖项可以增加多少捆绑包大小。
\n- Webpack 捆绑分析器\xe2\x80\x93 使用交互式、可缩放的树状图可视化 Webpack 输出文件的大小。
\n- bundlejs - 一种在线工具，可快速捆绑和缩小您的项目，同时查看压缩的 gzip/brotli 捆绑包大小，所有这些都在浏览器上本地运行。
\n\xe2\x80\x94 Next.js，投入生产，减少 JavaScript 大小
\n
- 不信任上述“await import('jspdf')”方法，我什至添加了使用“jspdf”模块的唯一组件的“dynamic”导入（next/dynamic），并且它在包分析器中仍然可见并且第一次加载大小也没有改变。 (13认同)
- Next.js 创建 2 个包：服务器和客户端。运行“next build”的输出引用客户端捆绑包，并且应该与“@next/bundle-analyzer”中的客户端捆绑包准确匹配。使用动态导入的模块不应显示在客户端捆绑包中，除非您在其他地方以非动态方式使用它们。 (2认同)
| 归档时间： |
|
| 查看次数： |
43611 次 |
| 最近记录： |