关于前端:Nextjs-135-正式发布速度大幅提升

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%。

image.png

自 Next.js 13.4 版本以来，Next.js 团队的重点始终是改良 App Router 利用的性能和可靠性。将 13.4 与 13.5 版本进行比拟，在一个新的利用上，能够看到以下改良：

本地服务器启动速度 进步 22%
HMR（疾速刷新）速度进步 29%
内存使用量 缩小 40%

通过以下优化办法实现了这种性能晋升：

通过缓存或缩小慢速操作来缩小工作量
优化低廉的文件系统操作
在编译过程中实现更好的增量树遍历
将不必要的阻塞同步调用改为懒加载
主动配置大型图标库

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

image.png

在持续迭代和改良以后打包工具性能的同时，Next.js 团队还在开发 Turbopack（beta）以进一步提高性能。在 13.5 版本中，next dev --turbo当初反对更多功能。

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

之前，增加了 modularizeImports 的反对，使开发者可能配置在应用这些库时如何解析导入。在 13.5 版本中，用 optimizePackageImports 代替了这个选项，它不须要指定导入映射，而是会主动优化导入。

像 @mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react 和 l ucide-react等库当初都能够主动优化，只加载理论应用的模块，同时不便编写带有很多命名导出的导入语句。

基于社区的反馈，此版本增加了一个新的实验性函数 unstable_getImgProps()，以反对不间接应用<Image> 组件的高级用例，包含：

解决 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/ 作为占位图像，这些图像不会被含糊解决。

自从 13.4.0 版本以来，我修复了超过 438 个谬误，并进行了各种改良，包含：

[文档] 对于表单和变异的新文档
[文档] 对于服务端和客户端组件的新文档
[文档] 对于内容安全策略和非 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 从新验证数据）
[改良] 服务端操作不再阻止路由之间的导航
[改良] 服务端操作不能再触发多个并发操作
[改良] 调用 r edirect()的服务端操作当初将其推入历史堆栈而不是替换以后条目，以确保返回按钮失常工作
[改良] 服务端操作为避免浏览器缓存增加了 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 的问题
[改良] 修复了开发模式下动静元数据路由反复的问题

关于前端:Nextjs-135-正式发布速度大幅提升

改善启动和疾速刷新工夫

优化的包导入

next/image 改良

其余改良