17611538698
webmaster@21cto.com

Next.js 13.5 发布,启动速度提高 22%,并优化包导入

资讯 0 1476 2023-09-21 08:48:58

Vercel 宣布发布 Next.js 13.5。

图片

什么是 Next.js

Next.js 是一个基于 React 的生产级框架,用于构建全栈 React 应用程序。目前每周 npm 下载量超过 1,258,087 次。Next.js是Vercel团队的开源项目,于2016年10月25日发布,最新版本为13.5.1。近年来,Next.js 在 React 生态系统中获得了巨大的知名度。

Next.js 在 GitHub 上拥有 112K 个 star、24700 个 fork、1400 个 watch、180 万个使用者和 2885 个贡献者。

使用 Next.js 的一些科技巨头包括 Meta、Uber、Auth0 和 Tripadvisor。

Next.js 成为全栈框架的关键功能

内置优化图像、字体、布局脚本、应用程序脚本、静态、动态和基于文件的元数据、静态资产、延迟加载、速度分析、Web Vitals 等。

Next.js 中的中间件有助于在满足请求之前执行代码块。在 Next.js 中,你可以使用简单的中间件、使用匹配器配置的路径中间件和条件语句。

使用 NextResponse API,你可以重定向和重写 URL 、从客户端请求标头、设置响应 cookie 和标头,还可以使用 Next.js设置高级中间件标志。

Next.js 中的客户端和服务器端渲染允许你使用客户端和服务器组件在客户端和服务器中渲染 UI。

CSS 支持使用全局 CSS、CSS 模块、SASS、Tailwind CSS 和 JS 中的 CSS 来设计 Next.js 应用程序的样式。

Next.js 中的高级路由和嵌套布局允许你使用文件系统自定义高级路由和嵌套布局。

Next.js 中的 Node.js 和 Edge Runtime 允许开发者使用无服务器函数,以构建快速且可扩展的 Web 应用程序。这有助于为用户提供动态和个性化的内容。

Next.js 中的数据获取有助于在客户端和服务器中执行异步获取功能,处理表单提交和数据突变。

Next.js 13.5 中的新增功能

该版本提供了多项改进:本地服务器启动速度提高了 22%,内存使用量减少了 40%,并同时优化了包导入。 

性能优化是通过关注缓存或最小化缓慢操作、优化开销较大的文件系统操作、编译期间更好的增量树遍历、将不必要的阻塞同步调用换为惰性调用以及自动配置大型图标库驱动。 

维护人员使用名为“optimize”的新选项优化了包导入,该选项会自动进行优化,取代了以前手动进行优化的方式。许多库已经过优化,仅加载你代码使用的模块。 

Vercel 团队还通过添加一个名为“unstable_getImgProps()”的新实验函数对“next/image”进行了改进。此函数会启用高级用例,例如使用“background-image”或“image-set”、使用画布“context.drawImage()”或“new Image()”以及使用“”媒体查询实现“Art Direction”和明暗模式图像。

Vercel 解释了新功能的用途,以前开发者为了执行这些操作,需要使用“”组件。

此版本还包括许多不同领域的新文档,包括表单、Mutations、服务器和客户端组件、内容安全策略和随机数以及缓存和验证。 

其他新功能包括对 IPv6 主机的支持、中间件和边缘运行时中的草稿模式支持以及 Playwright 的实验性模式。 

Next.js 13.5 总共包含 438 项改进和错误修复。

相关链接:

https://nextjs.org/blog/next-13-5


评论