程序员经验分享-hwhale

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

2024-05-08

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 : enter image description here


我建议安装@next/bundle-analyzer https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer更好地了解您正在导入哪些依赖项以及哪些依赖项会导致该文件大小。这可以帮助识别任何可能被删除的未使用或不必要的库。

您还可以考虑使用代码分割来减少应用程序初始负载的包。这可以通过使用延迟加载代码来实现dynamic import() https://v8.dev/features/dynamic-import and/or next/dynamic https://nextjs.org/docs/advanced-features/dynamic-import.

此外，Next.js 在其文档中还提到了其他工具，您可以使用这些工具来了解可以向您的包添加多少依赖项。

为了减少发送到浏览器的 JavaScript 数量，您可以使用以下工具来了解每个 JavaScript 包中包含的内容：

  • 进口成本 https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost– 在 VSCode 中显示导入包的大小。
  • 包恐惧症 https://packagephobia.com/– 查找向项目添加新的开发依赖项的成本。
  • 捆绑恐惧症 https://bundlephobia.com/- 分析依赖项可以增加包大小多少。
  • Webpack 捆绑分析器 https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer– 使用交互式、可缩放的树形图可视化 webpack 输出文件的大小。
  • bundlejs https://bundlejs.com/- 一个在线工具，可快速捆绑和缩小您的项目，同时查看压缩的 gzip/brotli 捆绑包大小，所有这些都在浏览器上本地运行。

— Next.js，投入生产，减少 JavaScript 大小 https://nextjs.org/docs/pages/building-your-application/deploying/production-checklist#reducing-javascript-size

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

Nextjs

所有人共享的 First Load JS 在 next.js 中相当重 的相关文章

随机推荐

  • 获取我的 VC++ 代码使用的符号列表

    我正在构建一个处理 VC 源代码的工具 为此 我需要获取符号列表 包括我的代码使用的局部变量名称及其类型 我知道Visual C 2010已经提供了一个 bsc文件 允许对象浏览器快速定位符号 但这是一个交互式工具 我需要获取文件中的符号列

  • 如何在ListView中添加页脚？

    我正在开发一个应用程序 在我的应用程序中 我使用 Listview 使用 dom 解析显示数据 我想在列表视图中添加页脚 当我单击页脚时将更多数据添加到列表视图中 我附加了图像 我想要该设计和流程 请参考image1和imgae2 我在红色

  • 如何更改 PyGame 中声音或音乐的音量？

    如何更改 PyGame 中的音量 例如通过设置更改音量 我制作了 UI 元素 只需要知道如何更改音量即可 我知道我说不清楚 但你可以理解我 请帮忙 更改音量取决于您是否正在播放pygame mixer Sound https www pyg

  • 如何在 data-disable-with 上设置 html 到 Rails Submit_tag

    我有一个使用 bootstrap 的 RoR 应用程序 我正在尝试将 fontawesome html 图标标签应用于 Submit tag 帮助程序 但它似乎不受支持 当我单击 提交 时 禁用内容仅显示为字符串 而不是解释为 html 尽

  • Bellman-Ford 算法检测什么？负重还是负循环？

    如果给定一个图 现在我们要从源头计算最短路径 现在 如果一条边具有负权重 但在到达目的地时有边到后边返回到该边 我的意思是如果没有循环 那么我们就没有负循环 但是here http en wikipedia org wiki Bellman

  • 跟踪 pthread 调度

    我想做的是创建某种图表 详细说明 Linux 中 两个 线程的执行情况 我不需要查看线程的作用 只需查看它们何时被安排以及持续多长时间 基本上是一条时间线 在过去的几个小时里 我一直在互联网上搜索跟踪 pthread 调度的方法 不幸的是

  • 将 KeyUp 作为参数传递 WPF 命令绑定文本框

    我有一个文本框 KeyUp 事件触发器连接到 WPF 中的命令 我需要将按下的实际键作为命令参数传递 该命令执行得很好 但处理它的代码需要知道按下的实际键 记住这可能是一个回车键或不仅仅是一个字母的任何键 所以我无法从 TextBox te

  • 为什么 `boost::any` 比 `void*` 更好？

    有什么先天优势boost any and boost any cast提供超过使用void and dynamic cast 优点是boost any比类型安全得多void E g int i 5 void p i static cast

  • nested_form/cocoon：可以将表行用于嵌套字段吗？

    我通常不使用表格作为表单 但是当有嵌套表单时 使用nested form或cocoon gem时 可以将每组表单元素放在表格行中吗 对我来说 这似乎非常直观 表中的每一行都代表一个对象 但是 nested form 和 cocoon gem

  • 提取 zip 文件时 Parallel.ForEach 抛出异常

    我正在阅读 zip 文件的内容并尝试提取它们 var allZipEntries ZipFile Open zipFileFullPath ZipArchiveMode Read Entries 现在 如果我提取使用 Foreach 循环

  • ASP.NET 中的 JavaScript 事件处理程序

    我有以下 iframe 控件 旨在成为类似 facebook 的按钮 iframe gt 我在上面定义了 javascript 函数 如下所示

  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map

  • 如何从 SQL Server 的表中获取列名？

    我想查询一个表的所有列的名称 我发现如何做到这一点 Oracle https stackoverflow com q 452464 419956 MySQL https stackoverflow com q 193780 419956 P

  • jQuery UI 和原型冲突

    我正在 Perl 中向我们的网站添加一个新表单 不是我的选择 表单会自动生成大量 html 以创建一致的外观 我的问题在于遗留系统在整个页面 包括加载时 中使用原型来处理各种事情 不过我想使用 jQuery 主要是 jQuery UI 中的

  • 在 Android 中使用 SQL (JDBC) 数据库

    在旧的 Java 应用程序中 我使用以下代码连接到 SQL 数据库并将其用于某些查询 private Connection dbConnection null System setProperty derby system home C C

  • 如果数组重叠，则折叠多行数组

    我在 PostgreSQL 9 3 中有一个表 其中包含一个列 每行包含一个数组 我正在努力寻找崩溃的方法 共享相同元素的数组行 Examples 简单重叠 给定以下两行数组 1 2 3 5 3 6 9 结果将是一行包含 5 1 2 3 6

  • 将 ASP.NET TextBox 呈现为 HTML5 输入类型“Number”

    当 ASP NET TextBox 呈现时 它会生成

  • 如何获取Oracle中命名事务的名称？

    我想在触发器中使用事务的名称 以便将其写入列中 我尝试了这个 在 SQL Developer 中 set transaction name hello select DBMS TRANSACTION LOCAL TRANSACTION ID

  • 如何在 Windows 上为“flask run”设置环境变量？

    我刚刚开始学习 Flask 我一直停留在设置 Flask 环境变量上 我不知道如何设置环境变量 每当我使用flask run命令 我遇到以下错误 错误消息 无法找到 Flask 应用程序 您没有提供 FLASK APP 环境变量 并且在当前

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

    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 t

热门标签