您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Next.js 13.5 正式发布,速度大幅提升!

时间:2023-09-20 11:38:49  来源:  作者: 前端充电宝

9 月 19 日,Next.js 13.5 正式发布,该版本通过以下方式提高了本地开发性能和可靠性:

  • 本地服务器启动速度提高 22%:使用App和Pages Router可以更快地进行迭代

  • HMR(快速刷新)速度提高 29%:在保存更改时进行更快的迭代

  • 内存使用量减少 40%:在运行next start 时测量

  • 优化的包导入:使用流行的图标和组件库时进行更快的更新

  • next/image 改进:支持<picture>标签、暗模式等

  • 修复了超过 438 个错误!

改善启动和快速刷新时间

App Router 的采用在持续增加,根据 HTTP Archive 对前1000万个网站进行的统计数据来看,其增长速度达到了每月 80%

图片

自 Next.js 13.4 版本以来,Next.js 团队的重点一直是改进 App Router 应用的性能和可靠性。将13.4与13.5版本进行比较,在一个新的应用上,可以看到以下改进:
  • 本地服务器启动速度提高 22%

  • HMR(快速刷新)速度提高 29%

  • 内存使用量减少 40%

通过以下优化方法实现了这种性能提升:

  • 通过缓存或减少慢速操作来减少工作量

  • 优化昂贵的文件系统操作

  • 在编译过程中实现更好的增量树遍历

  • 将不必要的阻塞同步调用改为懒加载

  • 自动配置大型图标库

Next.js 用户 Hanford 在他们的测试中报告了其编译速度提升 87-92%!
图片

在继续迭代和改进当前打包工具性能的同时,Next.js 团队还在开发 Turbopack(beta)以进一步提高性能。在13.5版本中,next dev --turbo现在支持更多功能。

优化的包导入

此版本对包导入进行了令人兴奋的突破,改善了在使用大型图标或组件库以及其他重新导出了数百或数千个模块的依赖项时的本地开发性能和生产冷启动速度。

之前,添加了modularizeImports的支持,使开发者能够配置在使用这些库时如何解析导入。在13.5版本中,用optimizePackageImports替代了这个选项,它不需要指定导入映射,而是会自动优化导入。

@mui/icons-material@mui/materialdate-fnslodashlodash-esramdareact-bootstrap@headlessui/react@heroicons/react和lucide-react等库现在都可以自动优化,只加载实际使用的模块,同时方便编写带有很多命名导出的导入语句。

next/image 改进

基于社区的反馈,此版本添加了一个新的实验性函数unstable_getImgProps(),以支持不直接使用<Image>组件的高级用例,包括:

  • 处理background-imageimage-set

  • 使用canvas的context.drawImage()new Image()时进行操作

  • 使用<picture>媒体查询来实现艺术方向或明/暗模式图片

  • 利用<picture>元素的媒体查询功能,实现明/暗模式图片的切换。


 
 
import { unstable_getImgProps as getImgProps } from 'next/image';

export default function Page() {
const common = { alt: 'Hero', width: 800, height: 400 };
const {
props: { srcSet: dark },
} = getImgProps({ ...common, src: '/dark.png' });
const {
props: { srcSet: light, ...rest },
} = getImgProps({ ...common, src: '/light.png' });

return (
<picture>
<source media="(prefers-color-scheme: dark)" srcSet={dark} />
<source media="(prefers-color-scheme: light)" srcSet={light} />
<img {...rest} />
</picture>
);
}

此外,现在placeholder属性支持提供任意的data:image/作为占位图像,这些图像不会被模糊处理。

其他改进

自从13.4.0版本以来,我修复了超过438个错误,并进行了各种改进,包括:

  • [文档] 关于表单和变异的新文档

  • [文档] 关于服务端和客户端组件的新文档

  • [文档] 关于内容安全策略和非ces的新文档

  • [文档] 关于缓存和重新验证的新文档

  • [功能] 在页面路由器中增加了对next/navigation中的useParamsuseSearchParams的支持,以便逐步采用

  • [功能] 在router.push / router.replace上支持scroll: false

  • [功能] 在next/link上支持scroll={false}

  • [功能] 开发环境支持HTTPS:next dev --experimental-https

  • [功能] 增加了对cookies().has()的支持

  • [功能] 增加了对IPv6主机名的支持

  • [功能] App Router现在支持Yarn PnP

  • [功能] 服务器操作中添加了对redirect()的支持

  • [功能] 通过创建项目使用Bun的支持:bunx create-next-app

  • [功能] 中间件和边缘运行时中的草稿模式支持

  • [功能] 现在中间件中支持cookies()headers()

  • [功能] Metadata API现在在Twitter卡片中支持summary_large_image

  • [功能] RedirectType现在从next/navigation导出

  • [功能] 添加了Playwright的实验性测试模式

  • [改进] 重构了next start,能够处理比之前多达1062%的请求量

  • [改进] 优化了Next.js内部以提高冷启动性能(速度提升高达40%,在Vercel上测试)

  • [改进] 对App Router增强了Jest支持

  • [改进] 重新设计next dev的输出

  • [改进] 服务端操作现在与完全静态路由一起工作(包括使用ISR重新验证数据)

  • [改进] 服务端操作不再阻止路由之间的导航

  • [改进] 服务端操作不能再触发多个并发操作

  • [改进] 调用redirect()的服务端操作现在将其推入历史堆栈而不是替换当前条目,以确保返回按钮正常工作

  • [改进] 服务端操作为防止浏览器缓存添加了no-cacheno-store cache-control

  • [改进] 修复了导航后可能调用两次服务端操作的错误

  • [改进] 提高了对具有服务端组件的Emotion css的支持

  • [改进] 支持scroll-behavior: smooth用于哈希URL更改

  • [改进] 在所有浏览器中添加了Array.prototype.at的Polyfill

  • [改进] 修复了next dev缓存处理多个并行请求时可能发生的竞争条件

  • [改进] 控制台中的fetch输出现在显示跳过缓存的请求(缓存:SKIP)

  • [改进] usePathname现在正确地去除了basePath

  • [改进] next/image现在在App Router中正确地预加载图像

  • [改进] not-found不再两次渲染根布局

  • [改进] 现在可以克隆NextRequest(即new NextRequest(request)

  • [改进] app/children/page.tsx现在正确地处理文字/children路由

  • [改进] 内容安全策略现在支持预初始化脚本的nonce

  • [改进] 使用next/navigation中的重定向时现在支持basePath

  • [改进] 在Static Export中使用不受支持功能时改进了错误消息

  • [改进] 改进了递归readdir实现(速度提高了约3倍)

  • [改进] 修复了动态路由段中fallback:false之前引起的挂起请求问题

  • [改进] 修复了在请求已被取消时将信号传递给重新验证请求导致请求失败的错误

  • [改进] 删除了404页面上的fetch轮询,改为使用websocket事件,避免在运行next dev时不必要的重新加载

  • [改进] performance.measure不再会导致水合不匹配

  • [改进] 修复了在编辑pages/_app时可能发生意外的完全重新加载的情况

  • [改进] ImageResponse现在扩展自Response,以改善类型检查

  • [改进] 在next build中没有页面输出时,不再显示pages

  • [改进] 修复了在<Link>中忽略skipTrAIlingSlashRedirect的问题

  • [改进] 修复了开发模式下动态元数据路由重复的问题



Tags:Next.js   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
怎么理解 React Server Component 和 Next.js 的关系
最近Next.js v14发布,发布会的各种梗图刷爆了国外前端社区。Next.js的诸多特性(比如Server Action、App Router),都是在RSC(React Server Component)基础上衍生出的。从名字可以看...【详细内容】
2023-11-16  Search: Next.js  点击:(207)  评论:(0)  加入收藏
原来真的可以在 Next.js 中写 PHP 代码?
Next.js 14 近期发布,其中一个重大的功能点是 Server Actions 成为稳定版,因其超前和熟悉的开发方式,在社交网络上引起了一阵讨论,应该是下面这张图的内容了。图片有人说这是又...【详细内容】
2023-11-07  Search: Next.js  点击:(297)  评论:(0)  加入收藏
Next.js的崛起:为什么它是现代网站的首选全栈框架
在选择前端框架时,可靠性对我的客户至关重要。尽管我研究了诸如SvelteKit等选项,但"为什么选择Next.js?"仍然是一个经常被问到的问题。在这篇文章中,我将详细解释为什么Next.js...【详细内容】
2023-11-02  Search: Next.js  点击:(282)  评论:(0)  加入收藏
Next.js支持在前端代码中写SQL,开倒车还是遥遥领先?
出品 | OSC开源社区(ID:oschina2013)下面这张图来自近日举办的 Next.js Conf 2023,里面的代码使用了名为「Server Actions」的特性 &mdash;&mdash;在前端代码中使用 SQL 语句直...【详细内容】
2023-10-29  Search: Next.js  点击:(291)  评论:(0)  加入收藏
Next.js 13.5 正式发布,速度大幅提升!
9 月 19 日,Next.js 13.5 正式发布,该版本通过以下方式提高了本地开发性能和可靠性: 本地服务器启动速度提高 22%:使用App和Pages Router可以更快地进行迭代 HMR(快速刷新)速度...【详细内容】
2023-09-20  Search: Next.js  点击:(149)  评论:(0)  加入收藏
使用Next.js创建Blog  给Blog添加主题模式和seo
前置【上一篇】完成了使用 Next.js 构建 blog。注意主题切换基于chakra-ui、tailwindcss(可选),chakra-ui 和 tailwind.css 都内置支持颜色模式chakra-ui 将颜色模式变量值...【详细内容】
2022-11-25  Search: Next.js  点击:(433)  评论:(0)  加入收藏
使用Next.js创建Blog
Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。Next.js 之所以能成为目前最好的 React...【详细内容】
2022-11-25  Search: Next.js  点击:(518)  评论:(0)  加入收藏
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序
在本文中,我们将学习如何使用 Next.js、 Prisma、 Postgres 和 Fastify 构建一个 Full-stack 应用程序。在本文中,我们将学习如何使用 Next.js、 Prisma、 Postgres 和 Fastif...【详细内容】
2022-07-12  Search: Next.js  点击:(714)  评论:(0)  加入收藏
记一次使用next.js开发官网经历
1.前情提要 最近我司官网重构,一个官网配一个后台,目的是动态配置官网内容,以前都是数据库写死的,为了更好的运营网站,体现品牌影响力,于是有了这一次大变革。2.需求分析需求不复...【详细内容】
2020-09-30  Search: Next.js  点击:(932)  评论:(0)  加入收藏
如何优雅的部署一个 Serverless Next.js 应用
本篇专门针对 Next.js 的 SSR 方案进行了探索和优化,一步一步带大家了解,如何基于 Serverless 架构部署一个实际的线上业务。 本文主要内容: 如何快速部署 Serverless Next.js ...【详细内容】
2020-07-24  Search: Next.js  点击:(380)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条