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

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

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

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

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

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

改善启动和快速刷新时间

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

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

优化的包导入

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

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

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

next/image 改进

基于社区的反馈,此版本添加了一个新的实验性函数unstable_getImgProps(),以支持不直接使用<Image>组件的高级用例,包括:h6128资讯网——每日最新资讯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/作为占位图像,这些图像不会被模糊处理。h6128资讯网——每日最新资讯28at.com

其他改进

自从13.4.0版本以来,我修复了超过438个错误,并进行了各种改进,包括:h6128资讯网——每日最新资讯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文件处理:快速导入、导出与批量处理

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

标签:
  • 热门焦点
  • Redmi Pad评测:红米充满野心的一次尝试

    从Note系列到K系列,从蓝牙耳机到笔记本电脑,红米不知不觉之间也已经形成了自己颇有竞争力的产品体系,在中端和次旗舰市场上甚至要比小米新机的表现来得更好,正所谓“大丈夫生居
  • 6月安卓手机好评榜:魅族20 Pro蝉联冠军

    性能榜和性价比榜之后,我们来看最后的安卓手机好评榜,数据来源安兔兔评测,收集时间2023年6月1日至6月30日,仅限国内市场。第一名:魅族20 Pro好评率:95%5月份的时候魅族20 Pro就是
  • 5月iOS设备好评榜:iPhone 14仅排第43?

    来到新的一月,安兔兔的各个榜单又重新汇总了数据,像安卓阵营的榜单都有着比较大的变动,不过iOS由于设备的更新换代并没有那么快,所以相对来说变化并不大,特别是iOS好评榜,老款设
  • 三分钟白话RocketMQ系列—— 如何发送消息

    我们知道RocketMQ主要分为消息 生产、存储(消息堆积)、消费 三大块领域。那接下来,我们白话一下,RocketMQ是如何发送消息的,揭秘消息生产全过程。注意,如果白话中不小心提到相关代
  • 最“俊美”淘宝卖家,靠直播和短视频圈粉,上架秒光,年销3000万

    来源 | 电商在线文|易琬玉编辑|斯问受访店铺:Ringdoll戒之人形图源:微博@御座的黄山、&ldquo;Ringdoll戒之人形&rdquo;淘宝店铺有关外貌的评价,黄山已经听累了。生于1985年的他,哪
  • 梁柱接棒两年,腾讯音乐闯出新路子

    文丨田静 出品丨牛刀财经(niudaocaijing)7月5日,企鹅FM发布官方公告称由于业务调整,将于9月6日正式停止运营,这意味着腾讯音乐长音频业务走向消亡。腾讯在长音频领域还在摸索。为
  • 拼多多APP上线本地生活入口,群雄逐鹿万亿市场

    Tech星球(微信ID:tech618)文 | 陈桥辉 Tech星球独家获悉,拼多多在其APP内上线了&ldquo;本地生活&rdquo;入口,位置较深,位于首页的&ldquo;充值中心&rdquo;内,目前主要售卖美食相关的
  • 阿里大调整

    来源:产品刘有媒体报道称,近期淘宝天猫集团启动了近年来最大的人力制度改革,涉及员工绩效、层级体系等多个核心事项,目前已形成一个初步的&ldquo;征求意见版&rdquo;:1、取消P序列
  • OPPO K11评测:旗舰级IMX890加持 2000元档最强影像手机

    【Techweb评测】中端机型用户群体巨大,占了中国目前手机市场的大头,一直以来都是各手机品牌的“必争之地”,其中OPPO K系列机型一直以来都以高品质、
Top