当前位置:首页 > 科技  > 软件

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

来源: 责编: 时间:2023-09-20 21:53:25 396观看
导读9 月 19 日,Next.js 13.5 正式发布,该版本通过以下方式提高了本地开发性能和可靠性:本地服务器启动速度提高 22%:使用App和Pages Router可以更快地进行迭代。HMR(快速刷新)速度提高 29%:在保存更改时进行更快的迭代。内存使

2tR28资讯网——每日最新资讯28at.com

9 月 19 日,Next.js 13.5 正式发布,该版本通过以下方式提高了本地开发性能和可靠性:2tR28资讯网——每日最新资讯28at.com

  • 本地服务器启动速度提高 22%:使用App和Pages Router可以更快地进行迭代。
  • HMR(快速刷新)速度提高 29%:在保存更改时进行更快的迭代。
  • 内存使用量减少 40%:在运行next start 时测量。
  • 优化的包导入:使用流行的图标和组件库时进行更快的更新。
  • next/image 改进:支持<picture>标签、暗模式等。
  • 修复了超过 438 个错误!

改善启动和快速刷新时间

App Router 的采用在持续增加,根据 HTTP Archive 对前1000万个网站进行的统计数据来看,其增长速度达到了每月 80%2tR28资讯网——每日最新资讯28at.com

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

优化的包导入

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

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

像@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react和lucide-react等库现在都可以自动优化,只加载实际使用的模块,同时方便编写带有很多命名导出的导入语句。2tR28资讯网——每日最新资讯28at.com

next/image 改进

基于社区的反馈,此版本添加了一个新的实验性函数unstable_getImgProps(),以支持不直接使用<Image>组件的高级用例,包括:2tR28资讯网——每日最新资讯28at.com

  • 处理background-image或image-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/作为占位图像,这些图像不会被模糊处理。2tR28资讯网——每日最新资讯28at.com

其他改进

自从13.4.0版本以来,我修复了超过438个错误,并进行了各种改进,包括:2tR28资讯网——每日最新资讯28at.com

  • [文档] 关于表单和变异的新文档。
  • [文档] 关于服务端和客户端组件的新文档。
  • [文档] 关于内容安全策略和非ces的新文档。
  • [文档] 关于缓存和重新验证的新文档。
  • [功能] 在页面路由器中增加了对next/navigation中的useParams和useSearchParams的支持,以便逐步采用。
  • [功能] 在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-cache,no-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的问题。
  • [改进] 修复了开发模式下动态元数据路由重复的问题。

本文链接:http://www.28at.com/showinfo-26-10645-0.htmlNext.js 13.5 正式发布,速度大幅提升!

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 实用!Python大型Excel文件处理:快速导入、导出与批量处理

下一篇: 服务网格可观测性之平台化监控报警

标签:
  • 热门焦点
  • 6月安卓手机好评榜:魅族20 Pro蝉联冠军

    性能榜和性价比榜之后,我们来看最后的安卓手机好评榜,数据来源安兔兔评测,收集时间2023年6月1日至6月30日,仅限国内市场。第一名:魅族20 Pro好评率:95%5月份的时候魅族20 Pro就是
  • 《英雄联盟》夏季赛总决赛今日开打!JDG对阵LNG首发名单来了 Knight:准备三连冠

    8月5日消息,今日17:00,《英雄联盟》2023LPL夏季赛总决赛将正式开打,由JDG对阵LNG。对两支队伍来说,这场比赛不仅要争夺夏季赛冠军,更要决定谁才是LPL赛区一
  • Automa-通过连接块来自动化你的浏览器

    1、前言通过浏览器插件可实现自动化脚本的录制与编写,具有代表性的工具就是:Selenium IDE、Katalon Recorder,对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
  • K8S | Service服务发现

    一、背景在微服务架构中,这里以开发环境「Dev」为基础来描述,在K8S集群中通常会开放:路由网关、注册中心、配置中心等相关服务,可以被集群外部访问;图片对于测试「Tes」环境或者
  • .NET 程序的 GDI 句柄泄露的再反思

    一、背景1. 讲故事上个月我写过一篇 如何洞察 C# 程序的 GDI 句柄泄露 文章,当时用的是 GDIView + WinDbg 把问题搞定,前者用来定位泄露资源,后者用来定位泄露代码,后面有朋友反
  • 中国家电海外掘金正当时|出海专题

    作者|吴南南编辑|胡展嘉运营|陈佳慧出品|零态LT(ID:LingTai_LT)2023年,出海市场战况空前,中国创业者在海外纷纷摩拳擦掌,以期能够把中国的商业模式、创业理念、战略打法输出海外,他们依
  • 东方甄选单飞:有些鸟注定是关不住的

    文/彭宽鸿编辑/罗卿东方甄选创始人俞敏洪带队的&ldquo;7天甘肃行&rdquo;直播活动已在近日顺利收官。成立后一年多时间里,东方甄选要脱离抖音自立门户的传闻不绝于耳,&ldquo;7
  • 冯提莫签约抖音公会 前“斗鱼一姐”消失在直播间

    来源:直播观察提起&ldquo;冯提莫&rdquo;这个名字,很多网友或许听过,但应该不记得她是哪位主播了。其实,作为曾经的&ldquo;斗鱼一姐&rdquo;,冯提莫在游戏直播的年代影响力不输于现
  • 三星推出Galaxy Tab S9系列平板电脑以及Galaxy Watch6系列智能手表

    2023年7月26日,三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。除此之外,Galaxy Tab S9系列平板电脑以及三星Galaxy Watch6系列智能手表也同期
Top